高德地图自定义marker点 房源地图汇聚点 自定义聚合点 自定

amap.gif 省
市
区
停车场
自定义弹窗

在高德地图中有个汇聚点的api但是那个不确定性太高，各个点的位置不确定。所以在使用时直接被弃用，转而使用marker去自定义各个层级的各个点位。

理解

工程中我们将省、市、区、停车场。大体分为四种UI样式。通过监听地图的层级变化，去改变不同zoom下显示的对应UI效果。

注意点

一、每种样式在自己zoom层级内只创建一次，因为如果不这样处理那么每次zoom改变都会去创建新的marker这样会导致页面卡顿崩溃。核心思维代码如下👇

        // 监听地图层级变化
        AMap.event.addListener(that.map, "zoomend", function () {
          var zoom = that.map.getZoom();
          zoomgetMarker(zoom);
        });
        // 根据层级不同去创建对应的marker。
        function zoomgetMarker(zoom) {
          if (zoom <= 7) {
            if (that.currentLevel !== 1) {
              that.currentLevel = 1;
              ....// 加载省的marker
            }
          } else if (zoom < 10) {
            if (that.currentLevel !== 2) {
              that.currentLevel = 2;
              ....// 加载市的marker
            }
          } else if (zoom < 12) {
            if (that.currentLevel !== 3) {
              that.currentLevel = 3;
              district.setLevel("district");
              ....// 加载区的marker
            }
          } else {
            if (that.currentLevel !== 4) {
              that.currentLevel = 4;
              ....// 加载停车场的marker
            }
          }
        }

二、在加载省、市、区、停车场四种不同的marker时需要将之前的marker销毁掉然后重新创建

      const that = this；
      that.map.remove(that.markers);// 先销毁掉之前的所有marker
      list.map((data) => {
        // 海量生成marker点
        var marker = new AMap.Marker({
          position: new AMap.LngLat(data.lng, data.lat),
          content: `自定义内容`,
          map: map,
        });
        that.markers.push(marker);// 每创建一个marker就添加到markers列表中。
      }

三、如何创建自定义Marker，以及在Marker中使用静态图片和Marker的点击事件

      // 1.html 以字符串的方式传给content就可以自定义Marker
      // 2.使用require('xxxx本地图片地址')获取本地图片
      var marker = new AMap.Marker({
        position: [lng,lat],
        content: `
        <div class="markercustomize2" style="display: flex;align-items: center;color: #ffffff;border-radius: 5px;padding:0 3px">
          <img style="width:25px;height:25px;object-fit: contain;"  src="${require("../assets/parking_map_logo.png")}"></img>
          <span style="font-size: 16px;white-space: nowrap;display: inline-block;line-height: 16px;height: 16px;">
            ${"芯城科技园停车场"}
          </span>
        </div>`,
        map: this.map,
      });
     
      // 3.监听marker的点击事件
      AMap.event.addListener(marker, "click", function (e) {
         // 处理点击事件
      });

四、如何动态改变Marker的class样式。

最好是不要用全局的样式去修改，因为那样会影响到全部。最好使用/deep/去局部修改marker的样式，这样可以最终达到好的结果。

  /deep/.amap-maps {
    .amap-drags {
      .amap-layers {
        .amap-markers {
          .amap-marker {
            z-index: 1 !important;
            .amap-marker-content {
              .markercustomize2 {
                background: #1567ff;
              }
            }
          }
          .amap-marker:hover {
            z-index: 9999 !important;
            .amap-marker-content {
              .markercustomize2 {
                background-color: #45afff;
              }
            }
          }
        }
      }
    }
  }

项目地址

在下载依赖包时请使用yarn