高德地图 Web JS API示例学习笔记（9）——覆盖物（点标记、覆盖物群组）

点标记

点标记

通过icon属性创建Marker，展示添加、修改、删除Marker的接口。

// 实例化点标记
    function addMarker() {
      marker = new AMap.Marker({
        icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [116.406315, 39.908775],
        offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(map);
    }

    function updateIcon() {
      marker.setIcon('https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png')
    }

    function updateContent() {
      if (!marker) {
        return;
      }

      // 自定义点标记内容
      var markerContent = document.createElement("div");

      // 点标记中的图标
      var markerImg = document.createElement("img");
      markerImg.className = "markerlnglat";
      markerImg.src = "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
      markerContent.appendChild(markerImg);

      // 点标记中的文本
      var markerSpan = document.createElement("span");
      markerSpan.className = 'marker';
      markerSpan.innerHTML = "Hi，我被更新啦！";
      markerContent.appendChild(markerSpan);

      marker.setContent(markerContent); //更新点标记内容
      marker.setPosition([116.391467, 39.927761]); //更新点标记位置
    }

    // 清除 marker
    function clearMarker() {
      if (marker) {
        marker.setMap(null);
        marker = null;
      }
    }

点标记就是普通的dom元素，要实现点标记的自动缩放效果，可以通过css3的animation动画实现，或者直接引入gif动图。

点标记锚点

设置点标记锚点。

for (var i = 0; i < positions.length; i++) {
      // 创建一个 Icon
      pos_icon[i] = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(12, 12),
        // 图标的取图地址
        image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/marker.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(12, 12),
      });
      var labelContent = "<div class='labelContent'>anchor:" + anchor[i] + "</div>"

      // 将 Icon 传入 marker
      pos_marker[i] = new AMap.Marker({
        position: positions[i],
        icon: pos_icon[i],
        anchor: 'center', //设置锚点
        offset: new AMap.Pixel(0, 0) //设置偏移量
      });
      // 添加点标记
      map.add(pos_marker[i]);

      // 创建一个 Icon
      var imageUrl = 'https://a.amap.com/jsapi_demos/static/demo-center/marker/icon.png'
      icon[i] = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(46, 28),
        // 图标的取图地址
        image: imageUrl,
        // 图标所用图片大小
        imageSize: new AMap.Size(46, 28),
      });
      // 将 Icon 传入 marker
      var labelOffset = new AMap.Pixel(-23, -28);
      marker[i] = new AMap.Marker({
        position: positions[i],
        icon: icon[i],
        anchor: anchor[i], //设置锚点
        offset: new AMap.Pixel(0, 0), //设置偏移量
        // 文本标记
        label: {
          content: labelContent,
          offset: labelOffset
        }
      });
      // 添加文本标记
      map.add(marker[i]);
    }

文本标记

用AMap.Text创建纯文本的点标记。

// 创建纯文本标记
    var text = new AMap.Text({
        text:'纯文本标记',
        anchor:'center', // 设置文本标记锚点
        draggable:true,
        cursor:'pointer',
        angle:10,
        style:{
            'padding': '.75rem 1.25rem',
            'margin-bottom': '1rem',
            'border-radius': '.25rem',
            'background-color': 'white',
            'width': '15rem',
            'border-width': 0,
            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
            'text-align': 'center',
            'font-size': '20px',
            'color': 'blue'
        },
        position: [116.396923,39.918203]
    });

    text.setMap(map);

自定义图标

使用AMap.Icon类的实例作为Marker的图标。

// 创建一个 Icon
    var startIcon = new AMap.Icon({
      // 图片原来的尺寸大小
      size: new AMap.Size(25, 34),
      // 图标的取图地址
      image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
      // 图标在地图中的显示大小
      imageSize: new AMap.Size(135, 40),
      // 图标取图偏移量
      imageOffset: new AMap.Pixel(-9, -3)
    });

    // 将 icon 传入 marker
    var startMarker = new AMap.Marker({
      position: new AMap.LngLat(116.35, 39.89),
      icon: startIcon,
      // marker的显示位置偏移量
      offset: new AMap.Pixel(-13, -30)
    });
    // 将 marker 添加到地图
    map.add(startMarker);

圆点标记

使用AMap.CircleMarker创建圆点标记。

for(var i=0;i<capitals.length;i+=1){
        var center = capitals[i].center;
        var circleMarker = new AMap.CircleMarker({
          center:center,
          radius:10+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
          strokeColor:'white',
          strokeWeight:2,
          strokeOpacity:0.5,
          fillColor:'rgba(0,0,255,1)',
          fillOpacity:0.5,
          zIndex:10,
          bubble:true,
          cursor:'pointer',
          clickable: true
        })
        circleMarker.setMap(map)
      }

自定义点标记内容

通过content属性设定Marker的显示内容。除了小图标之外，点标记还可以放置任意DOM元素。

// 点标记显示内容，HTML要素字符串
    var markerContent = '<div class="custom-content-marker">' +
        '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
        '   <div class="close-btn" οnclick="clearMarker()">X</div>' +
        '</div>';

    var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
    });

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

    // 清除 marker
    function clearMarker() {
        map.remove(marker);
    }

设置点标注的文本标签

通过label属性给Marker单独设置文本标签。

 // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
        offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
        content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
        direction: 'right' //设置文本标注方位
    });

删除多个点标记

通过Map.remove批量删除多个点标记。

map.remove(markers);

从多个点中删除指定点

通过Marker.setMap(null)从多个点中删除指定点标记。

markers[0].setMap(null);
markers[2].setMap(null);

设置点的拖拽效果

通过raiseOnDrag属性使得Marker在拖拽时弹起。

var marker = new AMap.Marker({
        position: map.getCenter(),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: true,
        cursor: 'move',
        // 设置拖拽效果
        raiseOnDrag: true
    });

    marker.setMap(map);

设置点的弹跳效果

通过Marker.setAnimation设置点的弹跳效果。

// 设置点标记的动画效果，此处为弹跳效果
    marker.setAnimation('AMAP_ANIMATION_BOUNCE');

可选值：
“AMAP_ANIMATION_NONE”，无动画效果
“AMAP_ANIMATION_DROP”，点标掉落效果
“AMAP_ANIMATION_BOUNCE”，点标弹跳效果

行驶轨迹回放

使用Marker.moveAlong方法，使Marker沿路径移动，模拟行驶轨迹回放。

marker = new AMap.Marker({
      map: map,
      position: [116.478935, 39.997761],
      icon: "https://webapi.amap.com/images/car.png",
      offset: new AMap.Pixel(-26, -13),
      // 自动选择
      autoRotation: true,
      // 开始角度
      angle: -90,
    });

    // 绘制轨迹
    var polyline = new AMap.Polyline({
      map: map,
      path: lineArr,
      showDir: true,
      strokeColor: "#28F", //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6, //线宽
      // strokeStyle: "solid"  //线样式
    });

    // 行驶中轨迹
    var passedPolyline = new AMap.Polyline({
      map: map,
      // path: lineArr,
      strokeColor: "#AF5", //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6, //线宽
      // strokeStyle: "solid"  //线样式
    });

    // 点标记移动事件，重绘行驶轨迹线
    marker.on('moving', function (e) {
      passedPolyline.setPath(e.passedPath);
    });

    map.setFitView();

    function startAnimation() {
      marker.moveAlong(lineArr, 200);
    }

    function pauseAnimation() {
      marker.pauseMove();
    }

    function resumeAnimation() {
      marker.resumeMove();
    }

    function stopAnimation() {
      marker.stopMove();
    }

加载海量点

使用MassMarks在地图上加载海量点，适合需要显示大量Marker的场景。

var style = [{
      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
      anchor: new AMap.Pixel(6, 6),
      size: new AMap.Size(11, 11)
    }, {
      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
      anchor: new AMap.Pixel(4, 4),
      size: new AMap.Size(7, 7)
    }, {
      url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
      anchor: new AMap.Pixel(3, 3),
      size: new AMap.Size(5, 5)
    }];

    var mass = new AMap.MassMarks(citys, {
      opacity: 0.8,
      zIndex: 111,
      cursor: 'pointer',
      style: style
    });
mass.setStyle(style);
mass.setStyle(style[2]);

标注和标注图层

标注和标注图层。可添加带文字的标注，支持海量点。

// 标注图层
    var layer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
      // 开启标注避让，默认为开启，v1.4.15 新增属性
      collision: true,
      // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
      animation: true,
    });

    map.add(layer);

    for (var i = 0; i < LabelsData.length; i++) {
      var curData = LabelsData[i];
      curData.extData = {
        index: i
      };
      // 标注
      var labelMarker = new AMap.LabelMarker(curData);
      layer.add(labelMarker);
    }

LabelsData样例数据：

覆盖物群组

添加/移除

对一类覆盖物，创建覆盖物群组，从地图上添加/移除。

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);
}

// 创建覆盖物群组，并将 marker 传给 OverlayGroup
var overlayGroups = new AMap.OverlayGroup(markers);
// 添加覆盖物群组
function addOverlayGroup() {
    map.add(overlayGroups);
}
// 移除覆盖物群组
function removeOverlayGroup() {
    map.remove(overlayGroups);
}

批量修改样式

可以通过 Ovelaygroup 对覆盖物批量修改属性。

overlayGroups.setOptions({
	strokeColor: '#ffeeff',
    outlineColor: '#3366FF'
});