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

本文做者：用户_123456789

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

 

效果体验

 

● 制做疫情地图须要用到的地图能力

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

● 制做疫情地图的步骤

一、地图 + 个性化样式

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

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

关于定位说明 ：

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

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

三、数据展现

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

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

四、周边疫情介绍窗口

因为疫情小区地图中的信息窗口样式与内容与API给出的信息窗口有必定差异，因此只有自定义信息窗口才能知足咱们的需求，这一部分代码见Demo中的nearbyOverlay.js文件，咱们在实际使用中能够将经过接口获取的周边疫情信息数据传递给该方法，渲染出来实际的疫情信息。

 

五、疫情检索功能

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

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

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

Demo下载

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

 

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

原文连接地址：https://developer.baidu.com/topic/show/290649