天天看點

【百度地圖API】如何制作可拖拽的沿道路測距

摘要:

地圖測距,大家都會,不就map.getDistance麼。可是,這隻能測任意兩點的直線距離,用途不夠實際啊。比如,我想測試北京天安門到北京後海的距離,怎麼辦呢?

顯然“沿道路測距”就顯得尤為重要了。那麼如果制作“可拖拽”的沿道路測距呢?我們一起來看一看。

---------------------------------------------------------------------------------------

一、建立地圖

  

二、建立兩個可拖拽的标注

先建立點,再把标注建立在該點上。最後添加标注在地圖上。

讓标注可拖拽的方法是:

【百度地圖API】如何制作可拖拽的沿道路測距

然後确定這兩個标注可以拖拽。

【百度地圖API】如何制作可拖拽的沿道路測距

代碼如下:

【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距

三、沿道路測距

【百度地圖API】如何制作可拖拽的沿道路測距

建立駕車導航,在回調函數裡設定距離的輸出。

寫個函數用來打開測距功能。

注意:起點和終點,要從改變位置後的marker裡取。類參考如下:

【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距

四、清除結果

為了下一次的測距,我們需要清除這一次的導航結果,和測距結果。

五、網頁結構

需要寫兩個安妮,一個用來計算距離,另一個用來清除資料。

還有一個展示測距結果的容器。

【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距

六、全部源代碼

【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距
【百度地圖API】如何制作可拖拽的沿道路測距

七、測兩點的直線距離

百度地圖API的官網上,有一個lib,是測試直線距離的。是以,這裡就不多說了。

【百度地圖API】如何制作可拖拽的沿道路測距

本文轉自左正部落格園部落格,原文連結:http://www.cnblogs.com/soundcode/archive/2013/04/07/3006514.html,如需轉載請自行聯系原作者

繼續閱讀