①注册高德地图开发者api ②创建项目获取key ③在publice下index.html引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v="key"></script>④创建idnex.vue
<template> <div> <div> <span>搜索：</span> <input type="text" id="keyword" value="请输入关键字：(选定后搜索)" onfocus="this.value=''" /> </div> <div id="mapContainer"></div> <div> <span>定位：</span> <input type="text" v-model="selectAddress" /> </div> <div> <span>经纬度：</span> <input type="text" v-model="selectLngLat" /> </div> </div> </template> <script> export default { name: "index", data() { return { cityLocation: "", lnglat: [116.397428, 39.90923], zoom: 11, selectAddress: "", selectLngLat: "", }; }, created() {}, mounted() { this.searchAddressMethod(); }, methods: { searchAddressMethod() { const self = this; AMap.plugin( [ "AMap.CitySearch", "AMap.Autocomplete", "AMap.PlaceSearch", "AMap.Geocoder", "AMap.ToolBar", ], function () { var citySearch = new AMap.CitySearch(); var map; // 搜索插件 var placeSearch; // 城市定位 begin citySearch.getLocalCity(function (status, result) { if (status === "complete" && result.info === "OK") { // 查询成功，result即为当前所在城市信息 // console.log(result); let rectangle = result.rectangle.split(";")[1].split(","); self.lnglat = rectangle.map(Number); // 初始化地图 begin map = new AMap.Map("mapContainer", { resizeEnable: true, // center: self.lnglat,//地图中心点 zoom: self.zoom, //地图显示的缩放级别 keyboardEnable: false, }); map.addControl(new AMap.ToolBar()); // 初始化地图 end // 绑定点击事件 begin let marker, geocoder; AMap.event.addListener(map, "click", function (e) { console.log(e); // 创建标记 begin if (marker != null) { marker.setMap(null); } marker = new AMap.Marker({ icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: e.lnglat, offset: new AMap.Pixel(-13, -30), }); marker.setMap(map); // 创建标记 end // 解析位置 begin // 获取经纬度 self.selectLngLat = e.lnglat.lat + "，" + e.lnglat.lng; if (!geocoder) { geocoder = new AMap.Geocoder({ // city: "010", //城市设为北京，默认：“全国” radius: 1000, //范围，默认：500 }); } geocoder.getAddress(e.lnglat, function (status, result) { if (status === "complete" && result.regeocode) { // console.log(result); //地址 var address = result.regeocode.formattedAddress; // console.log(address); self.selectAddress = address; } else { log.error("根据经纬度查询地址失败"); } }); // 解析位置 end }); // 绑定点击事件 end } }); // 城市定位 end // 搜索联想提示 begin var autoOptions = { input: "keyword", //使用联想输入的input的id }; var autocomplete = new AMap.Autocomplete(autoOptions); AMap.event.addListener(autocomplete, "select", function (e) { //TODO 针对选中的poi实现自己的功能 console.log(e); placeSearch = new AMap.PlaceSearch({ map: map, }); // placeSearch.search(e.poi.name); }); // 搜索联想提示 end } ); }, }, }; </script> <style scoped> input { width: 300px; height: 25px; padding-left: 10px; margin: 20px 0; } #mapContainer { width: 70vw; height: 50vh; } #mapContainer img { width: 20px; } </style>