[Javascript] 使用ngCordova的動畫方向箭頭“aroundMe”風格


Answers

Question

我希望創建與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位置計算。

所以我添加了用於Device OrientationngCordova插件來獲取magneticHeading ,現在我不知道如何使用它以及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 pointmagnetingHeading之間的magnetingHeading

也許我已經接近解決方案,但是我不能一個人前進。

我也試圖尋找一個數學公式,但是即使有一個巨大的痛苦去理解和實現它。

我希望你能幫上忙。