如何快速構建一張周邊疫情地圖

本文做者：用戶_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