需求描述

vue后台管理平台中引入了高德地图使用页面进行展示，自定义点标记样式以及点击点标记展示信息窗体。
由于项目中已经引入了高德地图，所以本文对高德地图的应用不做说明，假设相关配置均已完成。应用可参考高德开放平台文档

代码实现

• html相关

<div id="map" ref="map" style="width: 700px; height: 440px;"></div>

• js相关

mounted(){
  this.initMap(this.$refs.map);
  this.setMarkers(); //调用此方法需要在获取到点标记之后
  this.createInfoWindow();
},
// 初始化地图
initMap(dom) {
  this.map = new AMap.Map(dom, {
    center: [108.94,34.54], //地图中心点位置
    zoom: 12, //地图缩放级别
    mapStyle: "amap://styles/darkblue", //地图的显示样式
  });
},
// 地图标记点
setMarkers() {
  this.map.clearMap();
  let markerList = [];
  this.pointList.forEach((i) => { //this.pointList为点标记列表
    if (i.latitude && i.longitude) {
      AMapUI.loadUI(['overlay/SvgMarker'],(SvgMarker) =>{
        let marker =  new SvgMarker(null, {
          showPositionPoint:false,
          map: this.map,
          position: [i.longitude, i.latitude],
          label: {
            direction: "bottom",
          }
        });
        // 修改点标记样式，如果需要自定义点标记内容则不用调这个方法，需要只是修改点标记样式则可以调用此方法修改
        // marker.setSvgShape(this.getSvgShape(SvgMarker));

        // 自定义点标记内容，需要自定义可参考一下代码
        var markerContent = document.createElement("div");
        markerContent.className = 'circle';

        var markerSpan1 = document.createElement("div");
        markerSpan1.className = 'big-circle1';

        var markerSpan2 = document.createElement("div");
        markerSpan2.className = 'small-circle1';

        markerContent.appendChild(markerSpan1);
        markerContent.appendChild(markerSpan2);

        marker.setContent(markerContent); //更新点标记内容
        marker.setPosition([i.longitude, i.latitude]); //更新点标记位置
      })
      
      marker.on("mouseout", (e) => {
        this.infoWindow.close();
      });

       marker.on("click", (e) => {
         this.openInfoWindow(e, i);
      });
    }
  });
},
// 标记点样式
getSvgShape(SvgMarker) {
  return new SvgMarker.Shape["WaterDrop"]({
    width: 15,
    height: 20,
    fillColor: "red",
    strokeColor: "#ccc",
    strokeWidth: 0,
  });
},
// 创建信息窗体
createInfoWindow() {
  this.infoWindow = new AMap.InfoWindow({
    content: "",
    isCustom: true,
    offset: new AMap.Pixel(0, -20),
  });
},
// 打开信息窗体
openInfoWindow(e,i) {
  let content =
    `<div style='font-size: 14px; padding: 20px; text-align:left; border: 1px solid #58d8ec; background: #042556ed; color: #fff; position: relative;'>
    <p style='padding: 0;margin:0;'>村庄：${i.village}</p>
    <p style='padding: 5px 0 0 0;margin:0;'>姓名：${i.nickName}</p>
    <p style='padding: 5px 0 0 0;margin:0;'>联系电话：${i.phone}</p>
    </div>`;
  this.infoWindow.setContent(content);
  this.infoWindow.open(this.map, e.target.getPosition());
}

遇到问题

1. 使用自定义点标记marker样式时，设置样式无效。
   因为在style标签上填加了scoped，去掉scoped即可生效。也就是说，自定义点标记样式时，样式必须写在本页面且不能填加scoped属性。
2. 因为需求原因，页面增加了定时器进行刷新，每次刷新时点标记不会清除，marker无法移除。
   通过查找之后发现，需要先清除地图中的所有标记物再进行绘制，调用clearMap方法。

总结思考

1. 像这种有官方文档的，开发时应该仔细阅读文档再进行开发。可是往往由于项目周期紧张的原因，我们会先动手之后遇到问题再去各种查找解决办法。但是，查找解决办法的时候不要忘记先查文档，我想文档应该比较快地会得出答案。
2. 关于本文信息窗体的关闭，我采用了鼠标移出时自动关闭。也是由于当时看文档时比较着急所以采用这种简单一点的方法，其实可以在窗体中填加×号点击进行关闭，可以认真阅读文档试一下，我已经简单地尝试过了，是可以的。
3. 好记性不如烂笔头。多记录不仅可以加深印象，下次遇到时也可以直接进行查找。

参考链接

自定义高德地图的标记样式和内容
VUE项目中调用高德地图 (此链接讲了如何引用高德地图，可以进行参考，本文采用的是原生调用。)