javascript 使用ngCordova製作動畫方向箭頭“aroundMe”樣式
0
Answers
javascript angularjs google-maps ionic-framework ngcordova
我希望創建一個指南針/箭頭,就像我們在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
。
也許我接近解決方案,但我無法獨自前進。
我也試圖尋找數學公式,但即使理解和實施它也會有巨大的痛苦。
我希望你能幫忙。
37 votes
javascript