您的当前位置:主页 > 新闻动态 > 建站技术 >

芜湖微信小程序开发之如何对接高德地图

时间:2018-10-15

对接高德地图

vue对接高德地图api,用到项目上要实现的功能是:
有N家店铺,需要在高德地图上标记出来
点击地图上的标记点的坐标,会显示出该店铺的详细信息
搜索店铺的名字,相关店铺的坐标点在高德地图上会显示处理
代码实现比较简单,但是也有坑,核心是利用高德地图api
模板里引入地图api
<div id="js-container" class="map">正在加载数据 ...</div>
js处理代码如下
initMap () {

var map = new AMap.Map('js-container', {
    resizeEnable: true,   
    zoom: 13
});  

var marker
 
for(var i=0 ; i< this.data.length;i++){
      var jfong=[ this.data[i].lng,this.data[i].lat];	
     
				marker = new AMap.Marker({
			    position: jfong,
			    zIndex: 101,
			    map:map
				});	

      marker.setMap(map)
      marker.on('click', this.markerClick);
			
	
			
			
    }	

    },
    //点击事件
    markerClick() {
        console.log(777)
      
    }
  },
那么我们可以定义data数据如下
  data () {
    return {
  
      AMapUI: null,
      AMap: null,
     
 data:[{"lng":'118.378806','lat':'31.293173'},{"lng":'118.374686','lat':'31.304908'},{"lng":'118.405585','lat':'31.305201'},{"lng":'118.40198','lat':'31.325439'}]


    }
  },
以上代码非常简洁,主要用到高德地图api的2个功能
new AMap.Marker
 
marker.on
 
marker是多点标记的意思,通过循环把data里的经度和纬度(后台传过来,这里没有写接口信息了)
marker.on 就是当点击该坐标点信息的时候,执行相关的函数,例如弹出该店铺的信息等
 

Copyright © 2011-2015 灵创网络 版权所有 皖ICP备13005471号-1

友情链接:芜湖装饰公司