如何自己亲手制作一个防疫地图？
總第192篇/張俊紅
最近有幾個小程序可以查詢你周邊小區新型冠狀病毒的確診人數情況，通過這個小程序你可以看到你周圍疫情的情況，具體如下圖所示：
這張圖是怎么做出來的呢？我們可不可以自己做一個呢？是可以的，這張圖里面涉及到的技術點就是那些小紅標怎么標出來的？
這個小紅標我們都可以通過百度地圖API來實現，首先進入到百度地圖API的網站(http://lbsyun.baidu.com/index.php?title=jspopular)，這里有一些介紹百度地圖API的使用說明。
其他文檔看起來可能都比較無聊，我們直接看示例DEMO部分，點進去以后左邊菜單欄就會看到實現各種功能的示例：
我們先來看第一個小紅標的實現，小紅標是屬于覆蓋物，所以我們點擊覆蓋物示例進去，選擇設置新圖標，就可以看到在右邊圖中顯示出一個小紅標，顯示這個小紅標的核心其實就是指明顯示位置，即小紅標所在的經緯度，就是中間我紅框框住的代碼部分。
如果你要想把北京市有確診的小區標注出來，那么你只需要把這些小區的經緯度全部獲取到，然后在這里面指明即可，下面是我隨便新增了幾個標注示例：
小紅標標注出來以后，我們有的時候也想看一下在你方圓多少公里外有沒有疫情，方圓多少其實就是在你當前位置周圍畫一個圓，圓也屬于一種覆蓋物，我們在設置覆蓋物顯示/隱藏這里可以看到如何添加一個圓的方法，piont表示在哪個位置附近添加圓，500表示圓的大小，通過這段代碼圓也就可以實現了：
只需要把上面添加標注和添加圓的兩部分代碼組合在一起就可以達到文章開頭防疫地圖的效果。具體代碼如下：
<head><meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/><meta?name="viewport"?content="initial-scale=1.0,?user-scalable=no"?/><style?type="text/css">body,?html,#allmap?{width:?100%;height:?100%;overflow:?hidden;margin:0;font-family:"微軟雅黑";}</style><script?type="text/javascript"?src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script><script?type="text/javascript"?src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script><title>設置點的新圖標</title> </head> <body><div?id="allmap"></div> </body> </html> <script?type="text/javascript">//?百度地圖API功能var?map?=?new?BMap.Map("allmap");var?point?=?new?BMap.Point(116.404,?39.915);map.centerAndZoom(point,?15);//添加第一個小紅標注var?pt1?=?new?BMap.Point(116.417,?39.909);var?marker1?=?new?BMap.Marker(pt1);??//?創建標注map.addOverlay(marker1);??????????????//?將標注添加到地圖中//添加第二個小紅標注var?pt2?=?new?BMap.Point(116.40,?39.92);var?marker2?=?new?BMap.Marker(pt2);??//?創建標注map.addOverlay(marker2);??????????????//?將標注添加到地圖中//添加第三個小紅標注var?pt3?=?new?BMap.Point(116.39,?39.90);var?marker3?=?new?BMap.Marker(pt3);??//?創建標注map.addOverlay(marker3);??????????????//?將標注添加到地圖中//添加第四個小紅標注var?pt4?=?new?BMap.Point(116.39,?39.92);var?marker4?=?new?BMap.Marker(pt4);??//?創建標注map.addOverlay(marker4);??????????????//?將標注添加到地圖中//添加第五個小紅標注var?pt5?=?new?BMap.Point(116.41,?39.90);var?marker5?=?new?BMap.Marker(pt5);??//?創建標注map.addOverlay(marker5);??????????????//?將標注添加到地圖中//添加圓覆蓋物var?circle?=?new?BMap.Circle(point,500);map.addOverlay(circle);????????????//增加圓hideOver();</script>在使用上面代碼之前，需要先去百度地圖官網注冊一下，獲得你專屬的地圖密鑰(如果不會，可以百度搜索百度地圖密鑰申請)，然后替換我代碼中你的密鑰部分，目前地圖中心坐標為北京天安門，你也可以替換成其他地方的經緯度，做完這兩步驟以后，將上面的代碼復制到你電腦記事本中，然后存儲為.html格式，用瀏覽器打開就會看到如下效果：
你可以把所有已經有確診患者小區的經緯度獲取到，然后全部標注到地圖上，每天對標注進行實時更新，這樣就制作成了一張防疫地圖了，有興趣的同學可以自己去嘗試嘗試。百度地圖除了上面我們用到的這兩個簡單的功能以外，還有很多比較好玩的操作，大家可以自行去探索。
如何獲取一個地方的經緯度：
http://www.gpsspg.com/maps.htm
總結
以上是生活随笔為你收集整理的如何自己亲手制作一个防疫地图？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果发布 iPad 版 Final Cu
- 下一篇： 阴阳师骷髅怨恨哪里多(骷髅怨恨阴阳师)