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

Question

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

这就是我想要的：

我将当前位置保存在localstorage中。然后例如进一步1km我检查我的位置并检查两点之间的距离。

现在我想要一个从当前位置到本地存储区域的箭头。 我通过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/