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

效果如图:

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

实现步骤:

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

注意点:

  1. 地图容器:需要明确宽高,设置宽高,否则高度没有的话地图时不能正常显示。
  2. 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]},
]
  1. 还可以设置,如聚合后的点,和未聚合的点样式、事件等。更多配置请参考官方文档:lbs.amap.com/api/javascr...
相关推荐
用户3802258598249 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210011 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员17 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_19 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子20 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a24 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心24 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq26 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
独立开阀者_FwtCoder1 小时前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
爱喝水的小周2 小时前
AJAX vs axios vs fetch
前端·javascript·ajax