高德地图 Web JS API示例学习笔记（8）——覆盖物（通用）

通用

根据覆盖物调整地图范围

地图上覆盖物较多的情况下，如果需要保证所有覆盖物都在视野范围内， 需要将地图调整到合适的缩放等级和中心点，我们可以调用setFitView()方法，以实现该效果。

  // 创建两个点标记
    var m1 = new AMap.Marker({
      position: [116.49, 39.9]
    });
    var m2 = new AMap.Marker({
      position: [116.29, 39.9]
    });
    var m3 = new AMap.Marker({
      position: [116.69, 39.9],
      icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
    });

    map.add(m1);
    map.add(m2);
    map.add(m3);

    //自动适配到指定视野范围
    document.querySelector("#fitblue").onclick = function(){
      map.setFitView([m1, m2]);
    }

    //无参数时，自动自适应所有覆盖物
    document.querySelector("#fitall").onclick = function(){
      map.setFitView();
    }

添加一个或多个覆盖物

利用 map 的 add 方法在地图上添加点、线、面等覆盖物。

// 创建点覆盖物
    var marker = new AMap.Marker({
        position: new AMap.LngLat(116.39, 39.92),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        offset: new AMap.Pixel(-13, -30)
    });

    var polylinePath = [
        new AMap.LngLat(116.41, 39.93),
        new AMap.LngLat(116.43, 39.91)
    ];

    // 创建线覆盖物
    var polyline = new AMap.Polyline({
        path: polylinePath
    });

    var polygonPath = [
        new AMap.LngLat(116.46, 39.93),
        new AMap.LngLat(116.44, 39.91),
        new AMap.LngLat(116.49, 39.91)
    ];

    // 创建面覆盖物
    var polygon = new AMap.Polygon({
        path: polygonPath
    });

    var addOneOverlayButton = document.getElementById('addOneOverlay');
    var addSeveralOverlayButton = document.getElementById('addSeveralOverlay');

    // 绑定添加一个覆盖物事件
    addOneOverlayButton.onclick = function () {
        map.add(marker);
    };

    // 绑定添加多个覆盖物事件
    addSeveralOverlayButton.onclick = function () {
        map.add([polyline, polygon]);
    };

移除一个或多个覆盖物

利用 map 的 remove 方法，移除地图上一个或多个覆盖物。

    // 绑定移除一个覆盖物事件
    removeOneOverlayButton.onclick = function () {
        map.remove(marker);
    };

    // 绑定移除多个覆盖物事件
    removeSeveralOverlayButton.onclick = function () {
        map.remove([polyline, polygon]);
    };

清除所有覆盖物

清除地图上所有已添加的覆盖物。

// 清除地图上所有添加的覆盖物
map.clearMap();

获取某类覆盖物（获取矢量要素的坐标）

当地图上出现多种覆盖物类型的时候，获取某类覆盖物的方式。

// 获取某类型的覆盖物
      var overlays = map.getAllOverlays(type);
      // 获取overlays坐标
      var position = type == 'marker' ? overlays[0].getPosition() : overlays[0].getPath()[0];
      if(type == 'marker') {
        console.log(overlays[0].getPosition());
      } else {
        console.log(overlays[0].getPath());
      }

      var infoWindow = new AMap.InfoWindow({
        position: position,
        offset: type == 'marker' ? new AMap.Pixel(0, -35) : new AMap.Pixel(0, -5),
        content: '<div>已获取' + info[type] + '覆盖物</div>'
      });

      infoWindow.open(map);

本例中type可选值有：‘marker’、‘polyline’、‘polygon’

获取某个覆盖物（属性查询）

利用 extData 属性给覆盖物添加 id，获取特定的覆盖物。

var lnglats = [
      [116.39, 39.92],
      [116.41, 39.93],
      [116.43, 39.91],
      [116.46, 39.93]
    ];
    var markers = [];
    // 遍历坐标点，生成多个点图标
    for (var i = 0; i < lnglats.length; i++) {
      var lnglat = lnglats[i];
      // 创建点实例
      var marker = new AMap.Marker({
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
        //用户自定义属性
        extData: {
          id: i + 1
        }
      });

      markers.push(marker);
    }

    // 将点添加到地图
    map.add(markers);

    // 获取当前 id 的覆盖物
    function getOneOverlay() {
      var targetId = 2;
      var targetMarker;

      for (var i = 0; i < markers.length; i++) {
        // 获取存在每个 extData 中的 id
        var id = markers[i].getExtData().id;

        if (id === targetId) {
          targetMarker = markers[i];
          break;
        }
      }

      var position = targetMarker.getPosition();

      var infoWindow = new AMap.InfoWindow({
        position: position,
        offset: new AMap.Pixel(0, -35),
        content: '<div>已获取 id 为 2 覆盖物</div>'
      });

      infoWindow.open(map);
    }