如何在車輛跟蹤系統中根據標題設置箭頭位置

Question

在實時跟蹤中，我的GPS設備向我發送了Bing和Google地圖的標題。基於此，我使用箭頭圖像。但很多時候它顯示出錯誤的方向。我怎樣才能自動設置圖像。 代碼像

如果標題= 10，則strImage = 「圖像/ 10.JPG」

是否有任何選項來設置的箭頭。

Answer 1

有很多不同的方法來做到這一點。

使用大量的圖片：

這是你已經在你的問題中指示的方法。這包括創建一堆箭頭圖標，然後選擇最接近GPS標題的圖標。這種方法可以正常工作，但只與您擁有的圖像數量一樣好。這種方法是很多工作，而不是最好的選擇。

CSS3的方法：

開始指向了一個箭頭的圖像。然後使用CSS3變換來旋轉圖像。 http://www.w3schools.com/cssref/css3_pr_transform.asp

CSS樣式簡單地適用於您的圖釘是包括：

transform-origin: 50% 50%; 
transform: rotate([heading]deg) 

轉換原點指定變換轉動應圍繞圖像的中心出現。

請注意，只有在您的圖釘可以使用CSS的情況下，此方法纔有效。一些地圖控件可以讓你，但使用HTML5畫布的新版地圖控件不支持圖釘上的CSS。以上將適用於IE10及以上版本。對於IE9，您需要添加兩個以-ms開頭的CSS樣式，需要做類似的事情來支持其他舊瀏覽器。

HTML5的Canvas方法：

到CSS的方法類似，但生成的圖像數據URL允許您使用在任何地圖應用程序，允許您通過一個URL作爲自定義圖釘這一形象（最如果不是全部地圖控件）。這種方法包括在內存中創建一個HTML5畫布，旋轉它並在其上繪製箭頭圖像，然後從畫布中檢索數據URL並將其作爲URL傳遞給圖像。我在這個博客中寫了一些關於這個方法的文章（大約一半）：http://blogs.bing.com/maps/2013/04/10/html5-canvas-pushpins-in-javascript

這種方法適用於IE9及以上版本，以及任何支持HTML5畫布的瀏覽器。