Question

我发现this article包含great example。然而，我想做的不同之处是为旋转添加一个方位，以便集中注意力。

我设法获得如下现状：

var lat = null;
var lng = null;
var intId = null;

function showPosition(position) {
    lat = position.coords.latitude.toFixed(7);
    lng = position.coords.longitude.toFixed(7);
    $('#status').html('Latitude: ' + lat + '<br>Longitude: ' + lng);
}
function showError(error) {}

var watchId = null;
if (navigator.geolocation) {
    var optn = {
        enableHighAccuracy : true,
        timeout : Infinity,
        maximumAge : 0
    };
    watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);

    intId = setInterval(function() {
        if (lat !== null && lng !== null) {
            clearInterval(intId);
        }
    }, 1000);
} else {
    $('#status').html('Geolocation is not supported in your browser.');
}

同样，我可以将我当前的位置与另一个固定位置一起使用，并获得以下功能：

function getBearing(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;
}

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

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

我正在努力的是如何将两者结合在一起（设备方向和轴承）？

结合上面链接中的代码，这里是JSFiddle。我相信我拥有所需的所有信息（伽玛，贝塔，阿尔法和轴承），但我不知道如何在style.transform中将它们一起应用，因此图像指向特定位置而不是北方。

任何人都可以帮助我！？

如何将设备方向与轴承组合以正确旋转图像？

0 个答案: