如何快速构建一张周边疫情地图

近期，百度地图上线了“疫情小区”功能，使大家能够更清晰的查看周边疫情相关数据与人群密集场所，主动规避疫情相关场所。同时我们也收到了部分开发者的咨询：如何实现类似效果，为战"疫"贡献一份力量！本文将帮助您基于百度地图JS API最新的GL版构建周边的疫情小区地图。

 

效果体验

 

● 制作疫情地图需要用到的地图能力

• GL版地图 + 个性化地图样式
• 添加地图控件
• 确诊患者数据展示
• 周边疫情介绍信息窗口
• 输入提示与检索结果展示

● 制作疫情地图的步骤

1、地图 + 个性化样式

百度地图JS API随着开发者的需求变化不断迭代更新，并于去年底发布了最新的JS API GL版。本次教程选用了功能更丰富、交互更流畅，同时还支持3D效果的JS API GL版来实现！ 首先，在页面中引入百度地图JSAPI GL版： 然后初始化地图并设置个性化地图样式： 其中allmap为我们在html中创建的地图容器标签的ID，详细步骤文档可到百度地图开放平台官网浏览；customStyle为已经定义好的自定地图样式内容，具体内容见Demo中的mapStyle.js文件；当然您也可以用个性化地图编辑器配置自己想要的样式，然后替换样式json或者直接使用样式ID调用。使用样式ID设置地图个性化： 2、添加地图控件 先来添加一个地图的缩放控件： 由于缩放控件目前已经在API中定义过了，所以添加比较容易；那么接下来的定位控件就需要进行自定义了：

在自定义定位控件中创建控件的容器与控件的背景图容器，分别设置了样式loccontrl、locicon，这只是控件的样式内容，我们为控件容器绑定了点击事件，在点击事件中使用了JS API的定位方法geolocation，通过该方法拿到当前的位置坐标。此时会发现一个问题，添加到地图左下角的定位控件与地图的logo叠加到了一起，我们可以给logo设置偏移量使其跟随在定位控件的后边：

关于定位说明 ：

• 由于众多浏览器已不再支持非安全域的定位请求，所以http链接的定位请求会直接返回失败；
• 出于保护用户隐私的目的，如果用户拒绝页面的定位请求也会返回失败；
• 如果用户授权了定位请求，但是浏览器不支持H5定位或者H5定位失败，API会自动调用我们的IP定位服务；
• IP定位服务精度默认是城市级别，如果需要高精度IP定位服务可以到官网反馈平台申请开通。

接下来要做的就是将定位结果以及城市疫情相关的数据展示在地图上。

3、数据展示

首先完善定位控件中的定位方法，将定位结果展示在地图上：

下一步将确诊患者的的位置信息同样用marker渲染在地图上：

4、周边疫情介绍窗口

由于疫情小区地图中的信息窗口样式与内容与API给出的信息窗口有一定差别，所以只有自定义信息窗口才能满足我们的需求，这一部分代码见Demo中的nearbyOverlay.js文件，我们在实际使用中可以将通过接口获取的周边疫情信息数据传递给该方法，渲染出来实际的疫情信息。

 

5、疫情检索功能

在2.0与3.0版的API中我们已经封装好了输入提示功能（GL版目前尚未支持），接下来对Web服务API中的输入提示接口进行封装来实现该功能：

只需要在开发页面中渲染一个输入框，然后给输入框绑定onchange事件，调用上述方法，并将返回结果渲染到当前页面就可以实现输入提示功能！

Demo数据说明：非真实数据，仅供效果展示使用。

Demo下载

上述内容仅对Demo中关键的技术点进行了介绍，在您的实际项目中一定会有更多的状态切换与展示切换，开发者可按需灵活使用。在此开放君也希望广大开发者在疫情期间做好防护，同时也可以通过百度地图JS API作出更多应用场景，为疫情战役贡献自己的力量。

 

疫情期间，开放平台为更好支持开发者的工作，特别建立了“疫情专项”绿色通道，如开发者有相关产品、技术问题或商务合作需求可通过该绿色通道与我们取得联系！