武漢加油!!php
由於看到了不少城市都作了個確診病例的分佈地圖,發現廣州尚未因此作了一個,但願給你們作個參考html
代碼在 github.com/chenguojun/… 查看效果前端
如下是截圖git
位置信息大多發佈在城市的衛生健康委員會官網,能夠百度找到相關的疫情通報,廣州的分佈通知就在廣州市衛生健康委員會官網github
由於數據只有地址,也沒有詳細的數據資料,因此數據要自行錄入web
數據存儲上我使用了騰訊地圖的數據雲,能夠節省帶寬,並且能夠搜索數據庫
地圖上能夠選擇其餘的地圖,如百度地圖、高德地圖,其開放平臺都有所須要的接口json
或者選擇在數據庫上保存也能夠的,看我的選擇後端
數據只有文字,可是在地圖上展現須要用到經緯度,爲了方便處理,我使用了騰訊地圖的數據雲建立數據接口,能夠在數據雲上像數據庫那樣保存地點並查詢調用api
只須要提交地址(注意拼接城市名和區名,提升轉換的準確度)便可自動轉換爲座標並新建數據,數據處理的後端代碼: github
若是數據保存在本身的數據庫中則可使用地址解析接口把地址轉換爲地圖座標後存入本身的數據庫
全部數據都提交以後能夠在控制檯看到這個效果
數據處理完以後就是在前端展現數據了,這裏依然是使用騰訊的地圖
也能夠選擇高德地圖或者百度地圖,可是要注意
不一樣地圖使用的座標格式不同
,若是是在騰訊地圖上獲取的座標要在百度地圖上用就須要座標轉換
網頁加載地圖完成以後調用後端接口獲取數據,並計算距離後在網頁上展現出來
這一塊並不難,並且我作的比較簡陋,因此花的時間大多在數據處理上
同時也要在地圖上使用標記點標記地點,這樣比較直觀
後端我使用的是php環境,須要調用接口獲取在數據準備時保存的數據,我使用的是數據雲的區域搜索接口,能夠按區縣來對剛剛保存了的數據進行搜索
<?php $lng = $_GET['lng']; //參數傳入用戶當前座標 $lat = $_GET['lat']; //這裏是由於須要在地圖上展現當前位置,可是GPS獲取的是GPS座標,須要把GPS座標轉換爲騰訊地圖用的座標格式 if($_GET['action']){ echo curl_get("https://apis.map.qq.com/ws/coord/v1/translate?locations=$lat,$lng&type=1&key=地圖的key"); die(); } //area是區縣名,用於區域搜索,若是不傳入則爲在城市內搜索 $area = $_GET['area']; echo curl_get("https://apis.map.qq.com/place_cloud/search/region?table_id=數據準備時新建表的id&key=地圖的key®ion=廣州市,$area&filter=x.area=$area&orderby=distance($lat,$lng)"); 複製代碼
<?php //area爲區縣,list爲區縣內的列表 $data = [ ["area"=>"增城區","list"=>["新塘鎮富麗園二街","位置二"]] ["area"=>"白雲區","list"=>["黃石街白雲尚城","黃石花園"]] ]; //轉爲數據雲所需數據的格式 $newDataList = []; foreach ($data as $area){ foreach ($area['list'] as $location){ $newDataList[] = ["title"=>trim($location),"address"=>"廣州市".$area["area"].trim($location),"x"=>["area"=>$area["area"]]]; } } $result = curl_post("https://apis.map.qq.com/place_cloud/data/create",json_encode(["key"=>"地圖的key","table_id"=>"數據準備時新建表的id","data"=>$newDataList])); echo($result); 複製代碼
若是是使用數據庫上的,能夠在保存數據時加上區縣的字段用於搜索
其實整個網頁基本上沒有技術含量,可是數據處理上要有點耐心,你們若是有更方便的方法但願能夠分享一下