高德地图开放平台api---基础功能

1.地图初始化

const that = this;
        AMapUI.loadUI(["geo/DistrictCluster", "control/BasicControl", "overlay/SimpleMarker"],
          function (DistrictCluster, BasicControl, SimpleMarker) {
            that.map = new AMap.Map('map', {
              scrollWheel: true,
              resizeEnable: false,
              zoom: that.myzoom,
              center: ['118.757996','30.945667']
            })
            // 信息窗体
            that.infoPopup = new AMap.InfoWindow({
              offset: new AMap.Pixel(5, -10)
            })
　　　　　　  // 添加坐标点
            that.addMarks()            
          }
        );

2.单个坐标点添加

let marker = new AMap.Marker({
     position: pos,  
     icon: new AMap.Icon({
         image:'/static/images/location.png',
         size: new AMap.Size(30, 30),
          imageSize: new AMap.Size(30, 30)
        }),
        extData: {}, // 可添加额外信息
    });
this.map.add(marker )

3.多个坐标点添加

that.bounds.forEach(item => {
        let marker = ''       
        marker = new AMap.Marker({
              position: [item.o, item.a],  
              icon: new AMap.Icon({
                image:'/static/images/location-red.png',
                size: new AMap.Size(30, 30),
                imageSize: new AMap.Size(30, 30)
              }),
              extData: [item.o, item.a],
            });
         markers.push(marker)
        // 给坐标点添加鼠标点击事件
         marker.on("click", function (e) {
            let pos = e.target.getExtData()
            that.markerClickEvent()
          }, marker)
        })
 that.map && that.map.add(markers)

4.点击坐标点弹出信息窗体

let content = '<div class="supv-point-pos">' +
          '<p class="supv-pop-title">场所名称：' + that.usePlaceName + '</p>'+
          '<p class="supv-pop-title">距离电梯间距：' + distance + '米</p>'+
        '</div>'
        that.infoPopup.setContent(content)
        that.infoPopup.open(that.map, e.target.getPosition())

5.两点间距离试算

let pos1 = marker1.getPosition()
let pos2 = marker1.getPosition()
let distance = Math.round(pos1.distance(pos2))

6.更新锚点坐标

updateLocateMarker(lng, lat){
   this.positionMarker && this.positionMarker.start([lng, lat])
   this.map.setZoomAndCenter(this.zoom,[lng,lat])
 },

 

 

高德地图开发中的注意点：

1.系统引入高德地图后，会发现多了很多http://vdata.amap.com/nebula/v3 的请求，可采用如下方法，禁用浏览器发送相关请求

let map = new AMap.Map('mapId', {                
    layers: [new AMap.TileLayer()] // 禁用实时交通图层
})