我想使用phonegap在同一个应用程序中显示纬度,经度,航向。我尝试了phonegap相同的程序。如果我得到纬度,经度,我无法得到航向为空。有什么办法吗?
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="css/compass.css"/>
<script type="text/javascript" charset="utf-8">
// The watch id references the current `watchHeading`
var watchID = null;
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
var options = { frequency: 500 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
//watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
/*
// Start watching the compass
//
function startWatch() {
// Update compass every 3 seconds
var options = { frequency: 500 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
}
// Stop watching the compass
//
function stopWatch() {
if (watchID) {
navigator.compass.clearWatch(watchID);
watchID = null;
}
}
*/
// onSuccess: Get the current heading
//
function onSuccess(position) {
var element = document.getElementById('ang');
var deg_heading = document.getElementById('heading');
//var lat = position.coords.latitude;
//var lng = position.coords.longitude;
var deg = position.magneticHeading;
var actual_deg = 360;
//var deg = '180';
//alert ("lat/lng: "+lat+","+lng);
deg_heading.innerHTML = 'Heading: ' + (actual_deg - deg) + '°';// + " lat:"+lat+" long:"+lng;
element.style.webkitTransform = "rotate(-"+ deg +"deg)";
}
// onError: Failed to get the heading
//
function onError(compassError) {
alert('Compass error: ' + compassError.code);
}
</script>
</head>
<body>
<!-- <button onclick="startWatch();">Start Watching</button>
<button onclick="stopWatch();">Stop Watching</button> -->
<div id="compass" class="comapss">
<div class="compass_direction"><img id="ang" src="img/direction.png"/></div>
</div>
<div id="heading"></div>
</body>
</html>
无论出于何种原因,我必须在某些项目中监视 navigator.compass 的初始化。有时,直到 deviceReady 触发后不久它才会存在。我通常使用这样的东西:
var intervalId = setInterval(function() {
if( navigator.compass ) {
clearInterval(intervalId);
intervalId = navigator.compass.watchHeading(onSuccess, onError, options);
}
}, 250);
function locationFinder() {
if (navigator.geolocation) {
function success(pos) {
current_lng = pos.coords.longitude;
current_lat = pos.coords.latitude;
console.log("longitude get" + current_lng);
console.log("latitude get" + current_lat);
}
function fail(error) {
console.log("error 2");
}
// Find the users current position. Cache the location for 5 minutes,
// timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {
maximumAge : 500000,
enableHighAccuracy : true,
timeout : 6000
});
} else {
window.plugins.toast.showLongBottom("Please check GPS Setting",
function(a) {
console.log('toast success: ' + a)
}, function(b) {
console.log('toast error: ' + b)
});
}
}
我把这个留在这里是因为我浪费了一整天的时间来解决同样的问题。 您正在寻找错误的 API 来获取手机的方向。地理位置中的航向属性不是指南针方向,而是根据手机的移动计算出的方向。所以如果你站着不动,标题就是空的。一旦您移动,航向就会指向您的移动方向。请参阅此文档:https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCooperatives/heading
您正在寻找的是“deviceorientation”事件。对于 iOS/Safari,您必须首先手动请求该功能。 (这是 Typescript 代码)
const isIOS = !(
navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
navigator.userAgent.match(/AppleWebKit/)
);
if (isIOS) {
(DeviceOrientationEvent as any).requestPermission()
.then((response: any) => {
if (response === "granted") {
window.addEventListener("deviceorientation", this.receivedNewHeading, true);
} else {
alert("has to be allowed!");
}
})
.catch(() => alert("not supported"));
} else {
window.addEventListener("deviceorientationabsolute", this.receivedNewHeading, true);
}