Wir nutzen unser im vorherigen Tutorial erstelles jQuery Map Plugin um eine Google Karte mit einem Marker erzeugen zu können. Um die eigene Ortung zu starten, sollte unser Browser / Gerät die Geolocation API unterstützen. Um das sicherzustellen binden wir Modernizr ein.
Danke an Mark Lee, der die Geolokalisierung in einem einfachen Beispiel auf seinem Blog erklärt hat.
Vorbereitung
Wir benötigen den Rahmen aus meinem jQuery Plugin und natürlich das Plugin selbst. Außerdem laden wir uns die neueste Version von modernizr von der offiziellen modernizr-Website und binden diese in unser HTML-Gerüst ein.
Hier reicht es, wenn ihr nur die Gelocation API unter Misc aktiviert um eine möglichst kleine Datei zu erhalten.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Map Plugin</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="modernizr.js" type="text/javascript"></script>
<script src="map.js" type="text/javascript"></script>
<style>
.map {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="map">
</div>
</body>
</html>Die Geolokalisierung
In unserer map.html benötigen wir zunächst eine Abfrage ob der Browser die geolocation API unterstützt. Wenn nicht, benachrichtigen wir den Benutzer mit einem simplen Alert. Bei Erfolg allerdings starten wir die Ortung und der Spaß kann beginnen.
Die Funktion getCurrentPosition hat drei Parameter.
enableHighAccuracy
Steuert die Genauigkeit der Ortung: Wenn der Wert auf true gesetzt wird, benötigt euer Gerät mehr Strom und Zeit, kann aber die Position genauer bestimmen. Eine normale Genauigkeit genügt uns in diesem Beispiel. Bei Real Time Navigation o.ä., wie in Navigationssystemen ist ein sehr genauer Wert erforderlich.
timeout
Der Wert Timeout bestimmt, wann das Gerät aufgeben soll, die Position zu bestimmen bzw. wie lange darf er es versuchen. Wir versuchen es 5 Sekunden.
maximumAge
Der Parameter maximumAge bestimmt das Caching Verhalten der Position, wie lange darf die zuletzt gefundene Position erneut genutzt werden oder muss neu lokalisiert werden. Wir möchten mit 0 immer die aktuelle Position.
$(document).ready(function(){
// Kann dein Browser die Position bestimmen? Modernizr hat die Antwort
if (Modernizr.geolocation) {
var options = {
enableHighAccuracy: false,
timeout: 5000,
maximumAge: 0
};
// die Funktion getCurrentPosition() wird nun aufgerufen
navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, options);
}
else
{
alert('Dein Browser unterstützt dieses coole Feature leider nicht!');
}
});Fallback-Funktionen
Die Funktion navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, options)versucht nun die Position zu bestimmen.
Wir legen zwei zusätzliche Funktionen an, die als Callback-Funktionen dienen.
Bei Erfolg wird getPositionSuccess() aufgerufen und die Funktion getPositionError() sollte uns über eine fehlgeschlagene Ortung informieren.
// Ortung geglückt function getPositionSuccess(pos){ // wir holen uns die Geodaten vom übergebenen Objekt var currentLng = pos.coords.longitude; var currentLat = pos.coords.latitude; // wir übergeben die soeben gewonnen Geokoordinaten an unser Map Plugin um diese auf der Karte zu zeigen $('.map').cinMap( { 'zoom': 15, centerLat: currentLat, centerLng: currentLng } ); } // Ortung misslungen function getPositionError(){ alert('Leider konnte deine Position nicht bestimmt werden.'); }