引用百度地图API完成热力图

近期肺炎疫情信息闹的火热，就该情况完成来沪人员分布热力图以及标注确诊患者足迹。就开发研究中遇到的问题以及解决方案做一下记录，如下所示：

一、效果示意图

简述完成效果：百度地图引入，增加热力图，添加比例尺，添加缩放平移控件，增加标注，窗口提示等，具体实现和关键代码描述如下。

二、引入百度地图，增加热力图显示

2.1官网申请账号，申请密钥

需要调用百度地图需要先登录官网百度平台官网注册，点击控制台

在点击->我的应用->创建应用

创建应用时如果只想在浏览器端和本地测试则选择应用类型为浏览器端，Referer白名单填*即可

提交完成即可在我的应用处看到你新增的应用，可复制密钥后续代码可使用，在下图您的密钥替换成相应密钥即可。

2.2增加热力图显示

可在百度地图提供的开发平台查看所需功能案例以及官方代码，便于查阅，方便好用百度地图API示例，示意图如下：

只需将所需功能对应的代码复制进自己项目中，并将密钥替换即可实现官网所示案例。

三、热力图改造所遇问题以及解决

3.1增加比例尺和缩放控件

关键代码如下所示，结合图一可看结果，皆有详细备注不再赘述：

3.2地图默认尺寸以及控制尺寸缩放范围

我默认地图显示五公里，即缩放尺寸12，百度地图可缩放范围为3-18，关键代码如下所示：

3.3增加不同标注以及弹框

关键代码如下：

我使用引用图片的方式增加的标注，redPlace和grayPlace代表两种不同标注，简单放几条示例数据，主要包括经纬度，地点和时间，经纬度为确定位置，后两个信息为弹框显示可自行按需增减。实现效果如图一所示，

问题&解决

同一个地点出现不同时间的多条数据，标识出现覆盖，只显示一条数据的情况？更改前代码如下

解决：因需求14天前的数据显示为灰色，近期坐标数据为红色，所以首先需要判断redPlace中是否有重复的地址，有则提示增加相应时间，再判断灰色数据中是否有重复地点，有则增加相应时间且字体颜色变灰，代码中已经是更改好的版本，详情见如下代码所示。