高德导航的组件介入高德导航的组件介入

对于一些项目需要在组件中插入地图，可以选取位置以及经纬度可以把下面的代码写入到子组件作为弹出的地图demo

> import { lazyAMapApiLoaderInstance } from 'vue-amap'; export default { created() { lazyAMapApiLoaderInstance.load().then(() => { this.geocoder = new AMap.Geocoder({}); this.GeolocationResult = new AMap.Geolocation(); }); }, watch:{ value(val){ this.currentValue = https://www.it610.com/article/val; }, x(val){ this.shopAmap.lng = val; }, y(val){ this.shopAmap.lat = val; }, }, data() { return{ mapLoading:false, name:'', currentValue:this.value,//当前的value值 shopAmap:{ lat:0, lng:0, mapCenter:[116.412267, 39.902825], //地图的中心位置，以什么为中心展示 markers:[],//地图上点的展示 currentMarker:{ formattedAddress:this.value }, plugin: ['ToolBar','Scale','Geolocation'], }, }; }, computed: { mapCenter: function () { return [this.shopAmap.lng+'',this.shopAmap.lat+'']; } }, methods:{ //这是父组件调用的一个子组件方法，用来向子组件传递经纬度和此时的地址 getOldMap(val){ this.name=val.name//多个组件公用一个地图进行修改展示时使用 this.$refs.searchBox.search()//清除在地图的下拉选择时展示的模糊列 this.x=val.latitude this.y=val.longitude this.value=https://www.it610.com/article/val.address this.shopAmap.markers=[] this.$nextTick(()=>{ document.getElementsByClassName('search-box-wrapper')[0].getElementsByTagName('input')[0].value="" if(val.latitude && val.longitude){ this.shopAmap.lat = val.longitude; this.shopAmap.lng = val.latitude; this.shopAmap.currentMarker.formattedAddress=val.address this.shopAmap.markers.push([val.latitude,val.longitude]); }else{ this.setMap(val.address) } }) }, setMap(str){ var that = this; var placeSearch= new AMap.PlaceSearch(); placeSearch.search(str, function(status, result) { var pois = []; for(var i=0; i 0) { pois.forEach(poi => { let {lng, lat} = poi; lngSum += lng; latSum += lat; }); let center = { lng: lngSum / pois.length, lat: latSum / pois.length }; //设置地图中心 this.shopAmap.lng = center.lng; this.shopAmap.lat = center.lat; //设置显示的maker this.shopAmap.markers = [[center.lng, center.lat]]; this.generalAddres(center.lng, center.lat); } }, amapEvents(){ var that = this; return{ //地图的事件 click:(current)=>{ //地图点击事件 that.generalAddres(current.lnglat.lng,current.lnglat.lat); } } }, markerEvent(){ //maker的事件 var that = this; return { click:(a,b,c,d)=>{ //点击事件 }, dragend:(current)=>{ //拖拽完后的事件 that.generalAddres(current.lnglat.lng,current.lnglat.lat); } } }, } }