天天看點

使用阿裡雲伺服器制作疫情小區地圖使用阿裡雲伺服器制作疫情小區地圖

疫情特殊時期作為站長總該做點什麼,根據本地衛健委釋出的新型冠狀病毒确診病例所在地做一個動态的疫情小區地圖吧,新手站長網使用百度地圖生成器搭配阿裡雲伺服器制作教程:

使用阿裡雲伺服器制作疫情小區地圖

疫情特殊時期新手站長網有個本地社群,發現市民對于新型冠狀病毒确診病例所在小區很關注,于是利用百度地圖生成器制作了一個疫情小區地圖(地圖僅供自己測試玩的,沒敢釋出)。

其實過程很簡單,本教程适用于新手站長:

制作地圖所需工具

一:打開百度地圖開放平台

定位中心點:預設是北京市,新手站長網以長春市為例,定位中心點城市切換為長春市;設定地圖預設即可,也可以自定義。

二:添加标注

添加标注核心部分,根據本地衛健委釋出的新型冠狀病毒确診病例所在的小區,标注位置。

使用阿裡雲伺服器制作疫情小區地圖使用阿裡雲伺服器制作疫情小區地圖
注意:一定要根據本地衛健委提供的疫情資料,以免引起不必要的麻煩。

三:百度地圖示注數量

是在實際的使用過程中,新手站長網發現百度地圖的添加标注限制為10個,如何解決呢?這個限制隻是在使用地圖生成器時限制10個,我們擷取到位置所在經緯度坐标,可以在生成的地圖代碼上自行手動添加标注。

使用阿裡雲伺服器制作疫情小區地圖使用阿裡雲伺服器制作疫情小區地圖

如上圖所示,擷取到位置經緯度後,我們可以通過下面的代碼添加多條位置标注,在function addMapOverlay()函數裡面:

{content:"某某區小區名字",title:"小區名字",imageOffset: {width:-46,height:-21},position:{lat:43.891924,lng:125.319539}},           

上述代碼中,lat表示緯度,lng表示經度。那麼,問題來了,位置坐标的經緯度怎麼擷取?

四:擷取标注位置的經緯度坐标

可以使用百度地圖拾取坐标系統,來擷取經緯度坐标。位址:

http://api.map.baidu.com/lbsapi/getpoint/index.html

本來可以使用百度地圖生成器自帶的“添加标注”功能,由于限制标注數量為10個,如果标注位置較多,可以配合“百度地圖拾取坐标系統”擷取标注位置的經緯度,通過修改代碼,手動添加标注。

五:擷取代碼

編輯好地圖後,點選下方的“擷取代碼”,即可擷取地圖的html代碼,如下圖:

使用百度地圖生成器制作疫情小區地圖

使用阿裡雲伺服器制作疫情小區地圖使用阿裡雲伺服器制作疫情小區地圖

複制擷取到的代碼,儲存為html檔案。

六:沒有百度地圖密匙報錯

打開第五步中擷取的html代碼,我們發現并不能直接使用,會提示:

百度未授權使用地圖API,可能是因為您提供的密鑰不是有效的百度LBS開放平台密鑰,或此密鑰未對本應用的百度地圖JavaScriptAPI授權。您可以通路如下網址了解如何擷取有效的密鑰: http://lbsyun.baidu.com/apiconsole/key#

地圖生成工具基于百度地圖JS api v2.0版本開發,為了正常使用百度地圖API服務,請在此段代碼中加入您的密匙。報錯是由于沒有填寫百度地圖API密匙,我們去擷取一下密匙。

七:擷取百度地圖開放平台AK密匙

如果沒有賬号,先注冊一個百度開放平台的賬号,然後建立應用,如果是浏覽器端調用,應用類型選擇浏覽器端,如下圖所示:

使用阿裡雲伺服器制作疫情小區地圖使用阿裡雲伺服器制作疫情小區地圖

打開上述位址,如下圖所示:

使用阿裡雲伺服器制作疫情小區地圖使用阿裡雲伺服器制作疫情小區地圖

通路應用(AK)就是我們需要的密匙,複制AK密匙。

八:在地圖代碼中粘貼AK密匙

找到第五步中擷取的代碼,把“您的密匙”替換成你剛剛複制的AK密匙,代碼如下:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密匙"></script>           

這時候再次打開擷取到的html地圖檔案,可以正常使用。我們也可以通過iframe的方式,将代碼調用到網站代碼中。

最後,新手站長網基于本地衛健委制作的疫情小區地圖效果圖,如下所示:

使用阿裡雲伺服器制作疫情小區地圖使用阿裡雲伺服器制作疫情小區地圖

最後,不出門、不串門、不聚集、戴口罩,不給祖國添麻煩,加油武漢,加油中國!

繼續閱讀