高德地图H5 使用心得

  引入sdk

 let script = document.createElement('script');
   script.src = "https://webapi.amap.com/maps?v=1.4.15&key=yourkey";
document.body.appendChild(script);

　　初始化地图

this.mapObj = new AMap.Map('iCenter', {
   mapStyle: '你的地图样式', //设置地图的显示样式
   center: [_this.longitude, _this.latitude],  //设置中心点
   zoom: 11   // 设置缩放
});

　　创建地图marker

let mk = new AMap.Marker({
   icon: `/static/images/${_this.mapIcon[x.resourceType][x.emp]}.svg`,
   position: [longitude, latitude]
});

　　地图marker添加点击事件

mk.on('click', (e) => {
　　 _this.markerClick(e)；
})

　　地图marker循环创建并传入ID 用作点击事件交互

markerList.forEach(x => {
　　let mk = new AMap.Marker({
 　　　 icon: `/static/images/${_this.mapIcon[x.resourceType][x.emp]}.svg`,
　　　　position: [x.longitude, x.latitude]
　　});
   mk.on('click', (e) => {
　　　　_this.markerClick(e, x.id)；
　　})
　　this.mapObj.add(mk);
})

　　marker点击事件处理

markerClick(e, id) {
   console.log(e, id)；
}

　　地图设置中心点

this.mapObj.setCenter([longitude, latitude])；

　　清除地图marker

this.mapObj.clearMap();

　　地图绑定拖拽事件、获取地图拖拽后中心点

this.mapObj.on('dragend', (e) => {
    let center = this.mapObj.getCenter()
    // center.lng;
    // center.lat;
})