從gps位置指向另一個不指向正確的方向在JavaScript中的箭頭

我搜索了很多互聯網上，也在stackoverflow，但不知何故，我似乎無法得到它的權利！我正試圖從1個GPS方向指向另一個箭頭。從gps位置指向另一個不指向正確的方向在JavaScript中的箭頭

我附上了一個測試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>

來源

2013-02-01 Bocaxica

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

來源

2013-02-01 17:43:10 Dancrumb

太棒了！完美的作品。謝謝，+1的詳細答案。 – Bocaxica

從gps位置指向另一個不指向正確的方向在JavaScript中的箭頭

回答

相關問題