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

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/