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

【问题标题】：Arrow pointing from a gps position to another not pointing in right direction in JavaScript在 JavaScript 中从 gps 位置指向另一个不指向正确方向的箭头
【发布时间】：2013-01-17 01:06:54
【问题描述】：

我在互联网和 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>

【问题讨论】：

标签： javascript bearing

【解决方案1】：

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

你应该只使用

return (brng + 360) % 360;

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

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

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;
}

【讨论】：

太棒了！完美运行。谢谢，+1 的详细答案。