Mal ein bisschen rumgespielt mit der geolocation api.
ich kann es selbst leider nicht testen mit nen Handy (da sollte das ja noch besser gehen).
mich würde interessieren ob hier dann werte herauskommen:
Höhe in Meter, Geschwindigkeit in m/sec und Himmelsrichtung in Grad
Hier der link: http://test.ds-pro.de/geolocation
HTML
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta charset="UTF-8">
<meta name="author" content="Roland Starke">
<script>
window.onload = init;
function init(){
if(navigator.geolocation){
curent = 1;
GpsOnOf();
}else{
alert('Your Browser does not support geolocation');
}
}
function positionCallback(position){//schreibt die geodaten in die spans und erzeugt ein iframe mit der karte
document.getElementById("zeit").innerHTML = Math.round((new Date()).getTime()/1000 - position.timestamp/1000);
document.getElementById("langegrad").innerHTML = position.coords.latitude;
document.getElementById("breitegrad").innerHTML = position.coords.longitude;
document.getElementById("genauigkeit").innerHTML = position.coords.accuracy;
document.getElementById('hoehe').innerHTML = position.coords.altitude;
document.getElementById('hoehegenauigkeit').innerHTML = position.coords.altitudeAccuracy;
document.getElementById('geschwindigkeit').innerHTML = position.coords.speed;
document.getElementById('himelsrchtung').innerHTML = position.coords.heading;
//map iframe
var radius = (position.coords.accuracy/100000)/2 + 0.01;
var iframestring = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ';
iframestring += 'src="http://www.openstreetmap.org/export/embed.html?bbox=' + (position.coords.longitude - radius) + ',' + (position.coords.latitude - radius) + ',' + (position.coords.longitude + radius) + ',' +(position.coords.latitude + radius) + '&layer=mapnik"';
iframestring += ' ></iframe>';
document.getElementById('openstreetmap').innerHTML = iframestring;
//map iframe
}
function errorCallback(error){//einfach nur um die errors auszugeben sonst nichts weiter
switch(error.code){
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
function GpsOnOf(){
//stope die watch sache sofern sie schonmal gestartet wurde
if(typeof watcher !== 'undefined'){
navigator.geolocation.clearWatch(watcher);
}
curent = 1 - curent;
if(curent){
watcher = navigator.geolocation.watchPosition(positionCallback, errorCallback, {enableHighAccuracy:true, maximumAge:10000, timeout:27000});//Genau bestimmen an, maximales alter 10 sec, maximale wartezeit befor error 27 sec
document.getElementById('button').value = 'GPS ausschalten';
}else{
watcher = navigator.geolocation.watchPosition(positionCallback, errorCallback, {enableHighAccuracy:false, maximumAge:10000, timeout:27000});//Genau bestimmen aus, maximales alter 10 sec, maximale wartezeit befor error 27 sec
document.getElementById('button').value = 'GPS anschalten';
}
//solange du arbeitest mache mal den sendemast als bild später kommt dann die map da hin
document.getElementById('openstreetmap').innerHTML = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="425px" height="350px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="radio-tower-6-icon" d="M132.136,270.057c-13.332-21.918-21.012-47.654-21.012-75.182 C111.124,114.861,175.988,50,256.001,50s144.875,64.863,144.875,144.875c0,27.531-7.681,53.27-21.015,75.186 c7.416-16.746,11.543-35.271,11.543-54.764c0-74.783-60.622-135.406-135.403-135.406s-135.405,60.623-135.405,135.404 C120.596,234.785,124.722,253.312,132.136,270.057z M177.157,215.295c0-43.543,35.299-78.844,78.844-78.842 c43.544,0,78.844,35.299,78.844,78.844c0,10.094-1.899,19.744-5.357,28.615c9.38-14.029,14.854-30.895,14.854-49.037 c0-48.789-39.551-88.342-88.34-88.342c-48.79,0-88.341,39.551-88.341,88.342c0,18.143,5.474,35.008,14.854,49.037 C179.057,235.041,177.157,225.391,177.157,215.295z M279.508,262.863L349.588,462h-37.365c-17.515-49.793-94.934-49.781-112.446,0 h-37.364l69.784-198.297c2.602-7.393,0.706-15.631-4.869-21.141c-7.335-7.244-11.881-17.303-11.881-28.428 c0-22.084,17.899-39.988,39.983-39.988c22.086,0,39.988,17.904,39.988,39.988c0,10.84-4.316,20.672-11.323,27.873 C278.733,247.516,276.956,255.611,279.508,262.863z M242.349,340.973h27.303L256,302.164L242.349,340.973z M288.383,394.225 l-7.896-22.445h-48.975l-7.896,22.445H288.383z"/></svg>';
}
</script>
</head>
<body>
<div style="float:left;width:425px;height:350px;border: 1px solid black;" id="openstreetmap"></div>
<input id="button" type="button" value="GPS anschalten" onclick="GpsOnOf();" />(GPS ist nicht zwingend notwendig) <br/>
Alter der Abfrage in sec: <span id="zeit"></span> <br /> <br />
Längengrad: <span id="langegrad"></span> <br />
Breitengrad: <span id="breitegrad"></span> <br />
Genauigkeit in Meter: <span id="genauigkeit"></span> <br /> <br />
Höhe in Meter: <span id="hoehe"></span> <br />
Genauigkeit in Meter: <span id="hoehegenauigkeit"></span> <br /> <br />
Geschwindigkeit in m/sec : <span id="geschwindigkeit"></span> <br />
Himmelsrichtung in Grad : <span id="himelsrchtung"></span> <br />
</body>
</html>
