使用高德地图实现点聚合效果

效果如图：

实现的是一个简单的点聚合效果，没有多余的操作，只有单纯的展示效果。

实现步骤：

1.需要准备高德地图的开放平台的web端的key和密钥

申请时选择web端（JS API）

申请完成后得到key和密钥

2.代码

1、安装依赖需要下载高德地图依赖 @amap/amap-jsapi-loader

js 复制代码

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

2、密钥配置在main.js 或其他地方（index.html、App.vue）中设置密钥（必须有这步，不然后面地图会有问题）

js 复制代码

window._AMapSecurityConfig = {
  securityJsCode: '5b4512cb80ccef95b131f479d0ee46aa',
};

3、地图显示

js 复制代码

<template>
    <div>
       <div id="mapContainer"></div>
    </div>
</template>
export default {
   data() {
      return {
        map: null, //地图实例
        userList: [], // 数据列表
        cluster: null, // 点聚合信息
     };
  },
  mounted() {
    this.initMap();
  },
  methods: {
      // 初始化地图
      async initMap() {
          let that = this;
          // 引入插件
          let AMapLoader;
          try {
            AMapLoader = await import("@amap/amap-jsapi-loader");
          } catch (error) {
            that.$modal.msgWarning("地图初始化失败,请重新加载");
          }
          AMapLoader.load({
            key: "填写申请你的申请的key", //
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [
              "AMap.ToolBar", // 缩放按钮
              "AMap.Scale", // 比例尺
              "AMap.DragRoute", // 拖拽点图
              "AMap.Driving", // 导航
              "AMap.MarkerCluster", // 点聚合
            ],
          }).then((map)=>{
              AMap = map;
              that.map = new AMap.Map("mapContainer", {
                center: [116.394718, 39.90923], // 中心点
                zoom: 5,  // 缩放比例
              });
              that.map.addControl(new AMap.ToolBar());
              that.map.addControl(new AMap.Scale());
              // 获取数据
              that.handleQuery();
          })
      },
      
      handleQuery(){
        //通过请求获取数据
         getUserList().then((res) => {
             this.userList = res.data.map((v) => ({
                 weight: 1,
                 lnglat: [v.lng, v.lat],
             }));
             this.cluster = new AMap.MarkerCluster(
                this.map, // 地图实例
                this.userList, // 海量点数据，数据中需包含经纬度信息字段 lnglat
                {
                  gridSize: 30,
                }
             );
         })
      }
  }
}

注意点：

地图容器：需要明确宽高，设置宽高，否则高度没有的话地图时不能正常显示。
userList数据，数据格式，里面的lnglat需要正确放置经纬度数据

js 复制代码

[
    {weight: 1, lnglat: [114.3, 35.6]},
    {weight: 1, lnglat: [114.3, 35.6]},
    {weight: 1, lnglat: [114.3, 35.6]},
    {weight: 1, lnglat: [114.3, 35.6]},
]

还可以设置，如聚合后的点，和未聚合的点样式、事件等。更多配置请参考官方文档：lbs.amap.com/api/javascr...