harryhartman |
26-01-13 23:32 |
HTML5 geolocation accuracy Android vs iOs zijn erg verschillend
Tijdens het testen van de apps merkte ik een groot verschil tussen HTC Android en IPhone 4s omtrent de accuracy van geolocation watchPosition call welke ik gebruik in webView die de HTML5 file laadt.
De Android blijft binnen 3 meter maar de iPhone begint rond 5 meter en gaat naar een minuut of zo wel naar 50, 100 tot 1000 meter accuracy en komt niet meer dichterbij.
Weet iemand waarom en/of hoe op te lossen?
De relevante code:
HTML-code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% ; width:100%;}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
var previousPosition = null;
var startId;
var trackId;
var startPos;
var okAcc = 60000; // meter
var okDist = 2; // meter
function initialize() {
document.getElementById("info").innerHTML = "Je positie aan het zoeken...";
if (navigator.geolocation) {
startId = navigator.geolocation.watchPosition(function(position) {
startPos = position;
var startAccuracy = startPos.coords.accuracy;
document.getElementById("info").innerHTML = "In de buurt... ca. " + startAccuracy + " meter...";
if(startAccuracy < okAcc) {
document.getElementById("info").innerHTML = "Gevonden... binnen " + Math.round(startAccuracy) + " meter...";
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 16,
center: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
map: map
});
navigator.geolocation.clearWatch(startId);
alert("Start Tracking?");
document.getElementById("info").innerHTML = "Tracking start over 5 seconden...";
setTimeout(function(){startTracking()},5000);
}
}, function(error) {
switch (error.code) {
case 0:
alert(error.code + " Onbekende error");
break;
case 1:
alert(error.code + " Geen locatie toestemming");
break;
case 2:
alert(error.code + " Positie niet beschikbaar");
break;
case 3:
alert(error.code + " Timeout");
break;
}
}, {maximumAge:0, timeout:120000, enableHighAccuracy: true});
}
else {
alert("GeoLocatie wordt niet ondersteund!");
}
}
function startTracking() {
document.getElementById("info").innerHTML = "Tracking is gestart...";
var nuPos = startPos;
trackId = navigator.geolocation.watchPosition(successCallback, null, {maximumAge:0, timeout:60000, enableHighAccuracy:true});
function successCallback(position){
var trackAccuracy = position.coords.accuracy;
document.getElementById("info").innerHTML = "Tracking is gestart... Accuratie: " + Math.round(trackAccuracy) + " meter";
if(trackAccuracy < okAcc) {
var Dist = calculateDistance(nuPos.coords.latitude, nuPos.coords.longitude,
position.coords.latitude, position.coords.longitude);
document.getElementById("info").innerHTML = "Tracking is gestart... Acc: " + Math.round(trackAccuracy) + ", Dist: " + Math.round(Dist) + " mtr";
if(Dist > okDist) {
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
if (previousPosition){
var newLineCoordinates = [
new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];
var newLine = new google.maps.Polyline({
path: newLineCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 4
});
newLine.setMap(map);
}
previousPosition = position;
nuPos = position;
setTimeout(function(){evenWachten()},1000);
}
}
}
}
function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371000; // mtr
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
function stopZoeken() {
navigator.geolocation.clearWatch(startId);
alert("Zoeken gestopt!");
document.getElementById("info").innerHTML = "Zoeken is gestopt...";
}
function stopTracking() {
navigator.geolocation.clearWatch(trackId);
alert("Tracking gestopt!");
document.getElementById("info").innerHTML = "Tracking is gestopt...";
}
function evenWachten() {
}
</script>
</head>
<body onload="initialize()">
<div id="info"></div>
<div><input type="button" onclick="stopZoeken()" value="Stop Zoeken" /> <input type="button" onclick="stopTracking()" value="Stop Tracking" /></div>
<div id="map_canvas"></div>
</body>
</html>
|