HTML and CSS Reference
In-Depth Information
}
// Wird im Fehlerfall aufgerufen
function onFail() {
navigator.notification.alert('Immer geht was schief!');
}
</script>
</head>
<body onload "onBodyLoad()">
<div id "topbar" class "transparent" >
<div id "title">One Shot als App</div>
</div>
<div id "content">
<ul class "pageitem">
<li class "button">
<input type "button" value "Wo bin ich?" onClick "holePosition();
return false;">
</li>
</ul>
<ul class "pageitem">
<li class "textbox">
<p id "geolocation">Suche Position...</p>
</li>
</ul>
</div>
</body>
</html>
Das Beispiel ist schnell erklärt: Das Antippen des Buttons
Wo bin ich?
ruft die Funktion
holePosition()
auf, die dann den schon bekannten Geolocation-API-Aufruf vor-
nimmt:
navigator.geolocation.getCurrentPosition(onSuccess, onFail);
Bekommen wir die Geoposition, wird die Funktion
onSuccess()
ausgeführt, falls nicht,
wird die Funktion
onFail()
aufgerufen. Beides sind selbst definierte JavaScript-Funk-
tionen. Die Funktion
onSuccess
enthält die Positionsdaten in der Variablen
position
.
Wir nehmen uns dann die einzelnen Werte vor und generieren einen HTML-String, der
im
body
-Bereich der Seite angezeigt wird:
var element document.getElementById('geolocation');
element.innerHTML 'Breitengrad: ' + position.coords.latitude + '<br>' +
'Längengrad: ' + position.coords.longitude + '<br>' +
'Höhe: ' + position.coords.altitude + '<br>' +
'Richtung: ' + position.coords.heading + '<br>' +
'Geschwindigkeit: ' + position.coords.speed + '<br>'
