3

私はインターネットとstackoverflowでたくさん検索しましたが、どういうわけか正しくないようです! ある GPS 方向から別の GPS 方向を指す矢印を取得しようとしています。

問題を正確に説明するテスト HTML を添付しました。矢印を正しい方向に向けることができず、何が間違っているのかわかりません。角度を計算し、矢印がその角度で回転しますが、正しい角度ではありません。期待した結果が得られません。

どんな助けでも大歓迎です。

map.png

矢印.png

<!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>

4

1 に答える 1

6

の最後の行はbearing、方位の方向を時計回りから反時計回りに変更するのに役立ちます。

あなたはただ使うべきです

return (brng + 360) % 360;

calculateArrowRotation()さらに、ハードコーディングされた値を使用していて、入力パラメーターが使用されていないことに気付きましたよねlocation?

最後に、ベアリングの実装が正しくありません。ただし、それはあなたのせいではありません。実装をリストしているサイトは、1 つの重要な詳細についてぼんやりしている可能性があります。三角関数に入力するものはすべて、最初にラジアンに変換されている必要があります。

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;
}
于 2013-02-01T17:43:10.017 に答える