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

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/