指向位置的箭頭（地理位置）

Question

我想在移動網站上製作一種指南針。 這是我有：

這就是我想要的：

我保存在localStorage的我的當前位置。然後例如進一步我檢查我的位置並檢查兩點之間的距離。

現在我想要一個從當前位置到本地存儲位置的箭頭。 手機程度，我檢查與JavaScript庫「compass.js」。

但是現在，我該如何將箭頭指向位置？

Answer 1

看起來好像您正在嘗試在給定的旋轉中繪製圖像（箭頭）。那麼，如果我們假設一個現代瀏覽器（現在對手機不是一個錯誤的假設），那很容易。只需在您的頁面上有一個img並對其應用CSS轉換。

請參閱本網站中的CSS的輪換更多的信息：http://www.cssrotate.com/（哇，有人提出對於整個網站...）

現在你也想申請通過JavaScript的旋轉，所以你需要改變動態的CSS屬性。由於它還是相當新的，並有供應商的前綴，這有點棘手，但不是太難。這個網站有一個很好的方式，以應付它：每當你需要重定向箭頭

<img id="myarrow" src="myarrow.png" /> 
(blah) 
<script> 
// from http://www.javascriptkit.com/javatutors/setcss3properties.shtml 
function getsupportedprop(proparray){ 
    var root=document.documentElement; 
    for (var i=0; i<proparray.length; i++){ 
     if (proparray[i] in root.style){ 
      return proparray[i]; 
     } 
    } 
    return false; 
} 
var cssTransform; 
function setArrowRotation(x){ 
    if(cssTransform===undefined){ 
     cssTransform=getsupportedprop(['transform','webkitTransform','MozTransform','OTransform','msTransform']); 
    } 
    if(cssTransform){ 
     document.getElementById('myarrow').style[cssTransform]='rotate('+x+'deg)'; 
    } 
} 
</script> 

現在只需撥打setArrowRotation：http://www.javascriptkit.com/javatutors/setcss3properties.shtml

將其組合在一起，你可以有這個。

下面是其連續旋轉箭頭小提琴：http://jsfiddle.net/y2sxE/