vue中使用高德地图索引聚合

首先下载高德地图依赖

npm i @amap/amap-jsapi-loader --save

<template>
  <div>
    <div style="height:600px;width:800px;" id="container" ref="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "",
  data() {
    return {
      myMap: null,
      AMap: null,
      clusterIndexSet: {
        city: {
          minZoom: 2,
          maxZoom: 10
        },
        district: {
          minZoom: 10,
          maxZoom: 12
        },
        area: {
          minZoom: 12,
          maxZoom: 15
        },
        community: {
          minZoom: 15,
          maxZoom: 22
        }
      },
      roomData: [
        {
          lnglat: { className: "AMap.LngLat", lng: 114.177087, lat: 22.313861 },
          district: "旺角",
          community: "高级公寓",
          building: "旺角高级公寓",
          area: "旺角",
          city: "香港"
        },
        {
          lnglat: { className: "AMap.LngLat", lng: 114.174986, lat: 22.310604 },
          district: "油麻地",
          community: "油麻地一期(四室两厅)",
          building: "油麻地一期",
          area: "油麻地",
          city: "香港"
        },
        {
          lnglat: { className: "AMap.LngLat", lng: 114.194512, lat: 22.326271 },
          district: "九龙城",
          community: "九龙城二期公寓（三房）",
          building: "九龙城二期公寓",
          area: "九龙城",
          city: "香港"
        },
        {
          lnglat: { className: "AMap.LngLat", lng: 114.193718, lat: 22.320204 },
          district: "九龙城一期",
          community: "九龙城一期公寓（三房）",
          building: "九龙城一期公寓",
          area: "九龙城",
          city: "香港"
        },
        {
          lnglat: { className: "AMap.LngLat", lng: 114.171547, lat: 22.319974 },
          district: "太子",
          community: "太子一期公寓",
          building: "太子一期",
          area: "太子",
          city: "香港"
        },
        {
          lnglat: { className: "AMap.LngLat", lng: 114.175074, lat: 22.31805 },
          district: "极家",
          community: "极家公寓(H13)",
          building: "极家公寓(H13)",
          area: "极家",
          city: "香港"
        },
        {
          lnglat: { className: "AMap.LngLat", lng: 114.180711, lat: 22.439183 },
          district: "大埔墟",
          community: "大埔墟(山海别墅)",
          building: "大埔墟别墅",
          area: "大埔墟",
          city: "香港"
        }
      ],
      district: {
        香港: {
          center: "114.171202,22.277469"
        },
        油尖旺区: {
          center: "114.173331,22.311704"
        },
        九龙城区: {
          center: "114.192846,22.31251"
        },
        大埔区: {
          center: "114.171743,22.445653"
        }
      }
    };
  },
  methods: {
    // 获取高德地图
    getGaodeditu() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.IndexCluster"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.AMap = AMap;
          this.myMap = new AMap.Map("container", {
            zoom: 16, //级别
            animateEnable: true,
            center: [114.171202, 22.277469] //中心点坐标
          });
          var cluster = new AMap.IndexCluster(this.myMap, this.roomData, {
            renderClusterMarker: this._renderClusterMarker,
            clusterIndexSet: this.clusterIndexSet
          });
          console.log(cluster);
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 设置样式
    getStyle(context) {
      var clusterData = context.clusterData; // 聚合中包含数据
      var index = context.index; // 聚合的条件
      var count = context.count; // 聚合中点的总数
      var marker = context.marker; // 聚合绘制点 Marker 对象
      var color = ["8,60,156", "66,130,198", "107,174,214", "78,200,211"];
      var indexs = ["city", "district", "area", "community"];
      var i = indexs.indexOf(index["mainKey"]);
      var text = clusterData[0][index["mainKey"]];
      var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
      if (i <= 2) {
        var extra = '<span class="showCount">' + context.count + "套</span>";
        text = '<span class="showName">' + text + "</span>";
        text += extra;
      } else {
        size = 12 * text.length + 20;
      }
      var style = {
        bgColor: "rgba(" + color[i] + ",.8)",
        borderColor: "rgba(" + color[i] + ",1)",
        text: text,
        size: size,
        index: i,
        color: "#ffffff",
        textAlign: "center",
        boxShadow: "0px 0px 5px rgba(0,0,0,0.8)"
      };
      return style;
    },
    getPosition(context) {
      var key = context.index.mainKey;
      var dataItem = context.clusterData && context.clusterData[0];
      var districtName = dataItem[key];
      if (!this.district[districtName]) {
        return null;
      }
      var center = this.district[districtName].center.split(",");
      var centerLnglat = new AMap.LngLat(center[0], center[1]);
      return centerLnglat;
    },
    // 自定义聚合点样式
    _renderClusterMarker(context) {
      var clusterData = context.clusterData; // 聚合中包含数据
      var index = context.index; // 聚合的条件
      var count = context.count; // 聚合中点的总数
      var marker = context.marker; // 聚合点标记对象
      var styleObj = this.getStyle(context);
      // 自定义点标记样式
      var div = document.createElement("div");
      div.className = "amap-cluster";
      div.style.backgroundColor = styleObj.bgColor;
      div.style.width = styleObj.size + "px";
      if (styleObj.index <= 2) {
        div.style.height = styleObj.size + "px";
        // 自定义点击事件
        context.marker.on("click", e => {
          console.log(e);
          var curZoom = this.myMap.getZoom();
          if (curZoom < 20) {
            curZoom += 1;
          }
          this.myMap.setZoomAndCenter(curZoom, e.lnglat);
        });
      }
      div.style.border = "solid 1px " + styleObj.borderColor;
      div.style.borderRadius = styleObj.size + "px";
      div.innerHTML = styleObj.text;
      div.style.color = styleObj.color;
      div.style.textAlign = styleObj.textAlign;
      div.style.boxShadow = styleObj.boxShadow;
      context.marker.setContent(div);
      // 自定义聚合点标记显示位置
      var position = this.getPosition(context);
      if (position) {
        context.marker.setPosition(position);
      }
      context.marker.setAnchor("center");
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getGaodeditu();
    });
  }
};
</script>

<style lang="less">
.markerClass {
  background-color: #c0e5dfa5;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .imgimg {
    width: 50px;
    height: 50px;
  }
  .bgimg {
    position: absolute;
    left: 50%;
    width: 50px;
    height: 30px;
    background: url("../assets/images/tishi.png") no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
  }
  .city {
    width: 60px;
    height: 60px;
    font-size: 14px;
    font-weight: 700;
    line-height: 60px;
    color: #333;
    text-align: center;
    background-color: #86d2c1;
    border-radius: 50%;
  }
}
</style>