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

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

这就是我想要的：

我将当前位置保存在localstorage中。例如，再往前1公里，我检查我的位置，并检查两点之间的距离

现在我需要一个箭头，从当前位置指向localstorage中的位置。 我使用javascript库“compass.js”检查手机的度数

---

但是现在，我如何才能使箭头指向该位置呢？

它看起来好像您正试图以给定的旋转绘制图像（箭头）。好吧，如果我们假设一个现代浏览器（这对现在的手机来说是个不错的假设），那就很容易了。只需在页面上设置一个

img

，并在其上应用CSS转换即可

有关CSS中旋转的更多信息，请参见本网站：（哇，有人为此制作了一个完整的网站…）

现在还需要通过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>

（废话）
//从http://www.javascriptkit.com/javatutors/setcss3properties.shtml
函数getsupportedprop（proparray）{
var root=document.documentElement；
对于（var i=0；iSo您已经有了一个角度，只想显示一个具有该角度的箭头吗？我还没有箭头。它只是一个图像。我想制作一个箭头，并将其指向位置的方向。您可以帮助我如何计算角度。共享用于计算两点之间角度的js代码，我如何旋转它进入我之前保存的位置的方向？你可以用任何你喜欢的值调用
setarrorotation
。只需加载你的值并调用该函数。如果你有两个位置，你可以使用
atan2
获得一个角度，然后从Compass.js给出的角度中减去该角度。你需要像在我的摆弄，使其随着设备旋转而更新。此外，您可能需要添加0/90/180/270来正确排列箭头图像（您需要哪一个取决于图像和Compass.js的工作方式，因此更容易尝试）