vue中PC端使用高德地图实现搜索定位地址标记弹窗显示定位详情(完整实例)vue.js

npmi@amap/amap-jsapi-loader--save

封装公共的地图组件：

mounted(){this.initMap()},methods:{initMap(){AMapLoader.load({key:"**********************",//申请好的Web端开发者Key，首次调用load时必填version:"2.0",//指定要加载的JSAPI的版本，缺省时默认为1.4.15plugins:[//需要使用的插件'AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder','AMap.CitySearch'],resizeEnable:true,}).then((AMap)=>{constthat=this;that.map=newAMap.Map("container",{//设置地图容器idviewMode:"3D",//是否为3D地图模式zoom:12,//初始化地图级别});}).catch(e=>{console.log(e);})},

initMap(){AMapLoader.load({key:"*******************",//申请好的Web端开发者Key，首次调用load时必填version:"2.0",//指定要加载的JSAPI的版本，缺省时默认为1.4.15plugins:['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder','AMap.CitySearch'],resizeEnable:true,}).then((AMap)=>{constthat=this;that.map=newAMap.Map("container",{//设置地图容器idviewMode:"3D",//是否为3D地图模式zoom:15,//初始化地图级别center：[that.positionInfo.lng,that.positionInfo.lat];//首次加载地图自动加载到指定位置中心});that.showLocation(data)//新增标记并展示信息窗体that.map.addControl(newAMap.Scale())//在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺that.map.addControl(newAMap.ToolBar())//在图面添加鹰眼控件，在地图右下角显示地图的缩略图}).catch(e=>{console.log(e);})},

//新增标记showLocation(data){letmarker=newAMap.Marker({position:newAMap.LngLat(data[0],data[1])//参数为经纬度})this.map.clearMap()//清除所有覆盖物（点标志）this.map.add(marker)//添加点标志this.showInfoWindow(marker);//自定义信息窗体},//自定义信息窗体showInfoWindow(marker){letinfoWindow=newAMap.InfoWindow({isCustom:true,//是否自定义信息窗体content:`地址：${this.address}