[javascript] 使用ngCordova製作動畫方向箭頭“aroundMe”樣式

我希望創建一個指南針/箭頭，就像我們在AroundMe移動應用程序中看到的那樣 ，它指向地圖上的一個引腳與移動位置相對應，並在我移動手機時更新箭頭。

我很難理解如何做到這一點，我找不到任何解釋它的指南或教程。

我在網上找到的是一個軸承功能，我圍繞它創建了一個指令：

app.directive('arrow', function () {

    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 (brng + 360) % 360;
    }

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

    function toDeg(rad) {
      return rad * 180 / Math.PI;
    }

    return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      var arrowAngle = bearing(scope.user.position.lat, scope.user.position.lng, attrs.lat, attrs.lng);
      element.parent().css('transform', 'rotate(' + arrowAngle + 'deg)');
    }
  };

});

它似乎在一個方向更新箭頭，但遺憾的是它不是正確的方向，因為它不是使用移動magneticHeading位置計算的。

所以我添加了用於設備方向的ngCordova插件以獲得magneticHeading ngCordova ，現在我ngCordova知道如何使用它以及在bearing功能中的位置。

  $cordovaDeviceOrientation.getCurrentHeading().then(function(result) {
    var magneticHeading = result.magneticHeading;
    var arrowAngle = bearing(scope.user.position.lat, scope.user.position.lng, attrs.lat, attrs.lng, magneticHeading);
    element.parent().css('transform', 'rotate(' + arrowAngle + 'deg)');
  });

我試圖在return語句中添加它：

return (brng - heading) % 360;

要么：

return (heading - ((brng + 360) % 360));

用觀察者實現這個代碼我看到箭頭移動但不在確切的位置...例如從我的位置和引腳箭頭應該指向N並且它指向E。

總是在線查找我找不到任何教程/問題來找到lat/lng point和magnetingHeading之間的magnetingHeading 。

也許我接近解決方案，但我無法獨自前進。

我也試圖尋找數學公式，但即使理解和實施它也會有巨大的痛苦。

我希望你能幫忙。