从零开始的前端需求实现记录 - 地图聚合（前言）

概述：本文章主要记录通过 高德地图 JS API 实现在 vue 环境下 地图的聚合效果

一，需求概述

项目中有个数据大屏的数据地图，要求在会根据地图缩放聚合内容。(PS:前端和后端看了都流泪）

二，开发环境

"node":"v14.17.1",

"vue": "2.5.17",

"webpack": "4.16.5",

"element-ui": "2.13.2",

"mockjs": "^1.1.0",

"vue-amap": "^0.5.10",

三，高德地图 JS API

本章介绍使用高德地图 JS API 开发地图应用之前的一些准备工作。

注册账号并申请Key

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」，设置域名白名单，可选（建议设置域名白名单）。

4. 添加成功后，可获取到key值和安全密钥jscode（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)

注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险 。）

四，vue-amap

npm 安装

推荐 npm 安装。

npm install vue-amap --save

CDN

目前可通过 unpkg.com/vue-amap 获取最新版本的资源。

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

关于vue-amap的文档

官方文档地址： vue-amap文档https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

（PS：本人CV手癌多年，直接跳过前面内容的时候看到点聚合这一块的内容，发现vue-amap官方文档的内容让人一言难尽  --- 截图时间 ：2022.1.6）

 经过不懈的搜索终于发现了一份带有示例的vue-amap文档

1.9.2.1 点坐标 – 聚合 - vue-amap 中文文档 - 文江博客引入插件 import VueAMap from 'vue-amap'; VueAMap.initAMapApiLoader({ key: 'YOUR C…https://www.wenjiangs.com/doc/quoe2pxv

（PS:示例代码CV就能跑）

五，需求分析

正片内容：本项目的需求实现偏向与下列示例

按索引聚合-海量点标记-示例中心-JS API 2.0 示例 | 高德地图API高德开放平台官网https://lbs.amap.com/demo/jsapi-v2/example/mass-markers/marker-indexcluster2

根据省和市的分化索引对地图的缩放进行聚合，

所以本文的工作主要为解构示例中原生代码结构并向vue-amap迁移逻辑