Google地圖如何在DIV上繪製路線？

Question

我很好奇，谷歌地圖是如何繪製在谷歌地圖DIV元素藍色路線。我知道如何在Canvas元素上做到這一點，但Google地圖不使用HTML5畫布，而是在DIV上繪製複雜的線條。

他們是怎麼做到的呢？

要明確：我想知道他們是如何畫藍線的時候，我們得到的路線並不怎麼計算從點A到B的方向。

感謝

Answer 1

前陣子，他們習慣使用呈現在服務器端的圖像。目前的解決方案是在主流瀏覽器中使用矢量圖形API。 AFAIK，他們現在使用SVG用於非IE瀏覽器（Mozilla SVG），IE使用VML（最高可達IE9 Beta）（VML on Wikipedia）。 IE9測試版支持SVG，所以我期望在未來能夠看到使用SVG的IE9 +。

用Firebug或IE開發工具，你可以看到SVG（SVG標籤）/ VML（形狀標記）的標記。

編輯：讀您的評論。我期望它能夠正常渲染SVG/VML標記與實時更改（例如路由更改）的組合通過Javascript

Answer 2

http://code.google.com/apis/maps/documentation/javascript/services.html#DraggableDirections

「路線顯示爲折線圖」。

這是一個折線疊加層，請參閱： http://code.google.com/apis/maps/documentation/javascript/overlays.html#Polylines

Answer 3

當您詢問路線，解析點或地址時，Google的服務器將檢索結果對象（ APi Reference of Result Object）至極含有大量的用來繪製在地圖中的「藍線」的相關信息。在地圖上繪製線條的功能是DirectionsRenderer.setDirections(response)。

Inside setDirections，Google做的基本上是讀取響應的LatLngs，並在地圖中將其繪製爲折線。多段線沒有限制點。