Question

我在互联网上搜索了很多，也在stackoverflow上搜索过，但不知怎的，我似乎无法做到正确！我试图让箭头从1个GPS方向指向另一个方向。

我附上了一个测试HTML，它准确地解释了我的问题。我不能让箭头指向正确的方向，我不知道我做错了什么。它计算角度，箭头在那个角度旋转，但它不是正确的角度，我没有得到我期待的结果。

非常感谢任何帮助。

<!DOCTYPE HTML>
<html>
<head>
    <title>Point to a direction test</title>
    <script>
        function getLocation() {
            var info = document.getElementById("info");
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(calculateArrowRotation);
            }
            else {
                info.innerHTML = "Geolocation is not supported by this browser.";
            }
        }   

        function calculateArrowRotation(location) {
            // Point from here (Arc de Triomph, Paris)
            // var phoneLatitude = 48.873934;
            // var phoneLongitude = 2.2949;

            // Point from here (Gare du Nord, Paris)
            var phoneLatitude = 48.87977;
            var phoneLongitude = 2.355752;

            // Point to here (Musée du Louvre, Place du Carrousel, Paris, France)
            var destinationLatitude =  48.861519;
            var destinationLongitude = 2.3345495;

            var arrowAngle = bearing(phoneLatitude, phoneLongitude, destinationLatitude, destinationLongitude);

            var element = document.getElementById('arrow');
            element.style['transform'] = 'rotate(' + arrowAngle + 'deg)';

            var info = document.getElementById("info");
            info.innerHTML = "Longitude = " + phoneLongitude + "<br/>Latitude = " + phoneLatitude + "<br/>Arrow angle = " + arrowAngle;
        }

        function bearing(lat1,lng1,lat2,lng2) {
            var dLon = (lng2-lng1);
            var y = Math.sin(dLon) * Math.cos(lat2);
            var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
            var rad = Math.atan2(y, x);
            var brng = toDeg(rad);
            return 360 - ((brng + 360) % 360);
        }

        function toRad(deg) {
             return deg * Math.PI / 180;
        }

        function toDeg(rad) {
            return rad * 180 / Math.PI;
        }           
    </script>
</head>
<body onload="getLocation()">
    <img id="map" src="map.png" style="position: absolute; top: 20; left: 20px;">
    <img id="arrow" src="arrow.png" style="position: absolute; top: 80px; left: 105px;">
    <div id="info" style="position: absolute; top: 340px; left: 20px; font-family:sans-serif; font-size:11px;"></div>       
</body>

Answer 1

bearing中的最后一行用于将轴承的方向从顺时针方向更改为逆时针方向。

你应该使用

return (brng + 360) % 360;

此外，您确实意识到您在calculateArrowRotation()中使用了硬编码值，并且从未使用输入参数location，对吗？

最后，您的轴承实施不正确。但这不是你的错，列出实现的网站可能会在一个重要细节上模糊：你输入trig函数的所有内容必须首先转换为弧度：

function bearing(lat1,lng1,lat2,lng2) {
    var dLon = toRad(lng2-lng1);
    lat1 = toRad(lat1);
    lat2 = toRad(lat2);
    var y = Math.sin(dLon) * Math.cos(lat2);
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
    var rad = Math.atan2(y, x);
    var brng = toDeg(rad);
    return (brng + 360) % 360;
}

从gps位置指向另一个不指向JavaScript的正确方向的箭头

1 个答案: