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

Question

我想在移动网站上制作一种指南针。 这就是我所拥有的：

这就是我想要的：

我将当前位置保存在本地存储中。然后例如再走1公里，我检查我的位置并检查两点之间的距离。

现在我想要一个从当前位置指向本地存储位置的箭头。 我使用 javascript 库“compass.js”检查手机的度数。

但是现在，我怎样才能使箭头指向该位置？

Answer 1

看起来您正试图以给定的旋转方向绘制图像（箭头）。好吧，如果我们假设一个现代浏览器（现在对手机来说不是一个坏假设），那很容易。只需在您的页面上添加一个 img 并对其应用 CSS 转换即可。

有关 CSS 旋转的更多信息，请参阅此网站：http://www.cssrotate.com/（哇，有人为此制作了整个网站……）

现在您还想通过 JavaScript 应用旋转，因此您需要动态更改 CSS 属性。由于它仍然很新并且有供应商前缀，这有点棘手，但不是太难。这个网站有一个很好的方法来处理它：http://www.javascriptkit.com/javatutors/setcss3properties.shtml

把它放在一起，你可以有这个：

<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://jsfiddle.net/y2sxE/