Mit der Geolocation API können Sie den Standort des Nutzers ermitteln, sofern er seine Einwilligung erteilt hat.
Mit der Geolocation API können Sie mit Einwilligung des Nutzers dessen Standort ermitteln. Sie können diese Funktion beispielsweise verwenden, um Nutzer zu ihrem Ziel zu führen und von Nutzern erstellte Inhalte mit Geotags zu versehen, z. B. um zu markieren, wo ein Foto aufgenommen wurde.
Mit der Geolocation API können Sie auch sehen, wo sich der Nutzer befindet, und ihn im Blick behalten, während er sich bewegt – immer mit der Einwilligung des Nutzers und nur, solange die Seite geöffnet ist. Das ermöglicht viele interessante Anwendungsfälle, z. B. die Einbindung in Backend-Systeme, um eine Bestellung zur Abholung vorzubereiten, wenn sich der Nutzer in der Nähe befindet.
Bei der Verwendung der Geolocation API müssen Sie viele Dinge beachten. In diesem Leitfaden werden die gängigen Anwendungsfälle und Lösungen beschrieben.
Zusammenfassung
- Verwenden Sie die Standortbestimmung, wenn sie für den Nutzer von Vorteil ist.
- Fragen Sie als klare Reaktion auf eine Nutzergeste nach der Berechtigung.
- Verwenden Sie die Funktionserkennung, falls der Browser eines Nutzers die Standortbestimmung nicht unterstützt.
- Lernen Sie nicht nur, wie Sie die Standortbestimmung implementieren, sondern auch, wie Sie sie am besten nutzen.
- Testen Sie die Standortbestimmung auf Ihrer Website.
Wann sollte die Standortbestimmung verwendet werden?
- Ermitteln Sie, wo sich der Nutzer am nächsten zu einem bestimmten physischen Standort befindet, um die Nutzererfahrung anzupassen.
- Informationen (z. B. Nachrichten) an den Standort des Nutzers anpassen
- Die Position eines Nutzers auf einer Karte anzeigen.
- In Ihrer Anwendung erstellte Daten mit dem Standort des Nutzers taggen (z. B. ein Bild mit einem Geotag versehen)
Verantwortungsvoll um Erlaubnis bitten
Aktuelle Nutzerstudien haben gezeigt, dass Nutzer Websites misstrauen, die sie beim Seitenaufbau einfach auffordern, ihren Standort preiszugeben. Was sind also die Best Practices?
Gehen Sie davon aus, dass Nutzer ihren Standort nicht preisgeben
Viele Nutzer möchten ihren Standort nicht preisgeben. Daher sollten Sie einen defensiven Entwicklungsstil wählen.
- Behandeln Sie alle Fehler der Geolocation API, damit Sie Ihre Website an diese Bedingung anpassen können.
- Geben Sie klar und deutlich an, warum Sie den Standort benötigen.
- Verwenden Sie bei Bedarf eine Fallback-Lösung.
Fallback verwenden, wenn die Standortbestimmung erforderlich ist
Wir empfehlen, dass Ihre Website oder Anwendung keinen Zugriff auf den aktuellen Standort des Nutzers erfordert. Wenn für Ihre Website oder Anwendung jedoch der aktuelle Standort des Nutzers erforderlich ist, gibt es Lösungen von Drittanbietern, mit denen Sie eine bestmögliche Schätzung des aktuellen Standorts des Nutzers erhalten können.
Diese Lösungen funktionieren oft so, dass die IP-Adresse des Nutzers den physischen Adressen zugeordnet wird, die in der RIPE-Datenbank registriert sind. Diese Standorte sind oft nicht sehr genau und geben normalerweise die Position des Telekommunikationsknotens oder Mobilfunkmasts an, der dem Nutzer am nächsten ist. In vielen Fällen sind sie möglicherweise nicht einmal so genau, insbesondere wenn der Nutzer ein VPN oder einen anderen Proxy-Dienst verwendet.
Zugriff auf den Standort immer über eine Nutzergeste anfordern
Sorge dafür, dass Nutzer verstehen, warum du nach ihrem Standort fragst und welchen Vorteil sie davon haben. Wenn Sie die Berechtigung sofort auf der Startseite anfordern, während die Website geladen wird, führt das zu einer schlechten Nutzererfahrung.
Gib dem Nutzer stattdessen einen klaren Call-to-Action oder einen Hinweis darauf, dass für einen Vorgang der Zugriff auf seinen Standort erforderlich ist. Der Nutzer kann dann die Systemaufforderung für den Zugriff leichter mit der gerade initiierten Aktion verknüpfen.
Gib deutlich an, dass für eine Aktion der Standort angefordert wird.
In einer Studie des Google Ads-Teams wurden Nutzer gebeten, auf der Website eines bestimmten Hotels ein Zimmer in Boston für eine bevorstehende Konferenz zu buchen. Unmittelbar nachdem sie auf der Startseite auf den Call-to-Action „Suchen und buchen“ getippt hatten, wurden sie aufgefordert, ihren GPS-Standort freizugeben.
In einigen Fällen waren die Nutzer frustriert, weil sie nicht verstanden, warum ihnen Hotels in San Francisco angezeigt wurden, obwohl sie ein Zimmer in Boston buchen wollten.
Besser ist es, wenn Nutzer verstehen, warum Sie sie nach ihrem Standort fragen. Fügen Sie ein bekanntes, auf allen Geräten gängiges Symbol hinzu, z. B. einen Entfernungsmesser, oder einen expliziten Call-to-Action wie „In meiner Nähe finden“.
Nutzer sanft dazu auffordern, die Berechtigung zur Standortermittlung zu erteilen
Sie haben keinen Zugriff auf die Aktivitäten der Nutzer. Sie wissen genau, wann Nutzer den Zugriff auf ihren Standort verweigern, aber nicht, wann sie Ihnen Zugriff gewähren. Sie wissen nur, dass Sie Zugriff erhalten haben, wenn Ergebnisse angezeigt werden.
Es empfiehlt sich, Nutzer zu einer Aktion zu „drängen“, wenn sie diese ausführen sollen.
Unsere Empfehlung
- Richten Sie einen Timer ein, der nach kurzer Zeit ausgelöst wird. 5 Sekunden sind ein guter Wert.
- Wenn Sie eine Fehlermeldung erhalten, zeigen Sie dem Nutzer eine Meldung an.
- Wenn Sie eine positive Antwort erhalten, deaktivieren Sie den Timer und verarbeiten Sie die Ergebnisse.
- Wenn du nach dem Zeitlimit keine positive Antwort erhalten hast, zeige dem Nutzer eine Benachrichtigung an.
- Wenn die Antwort später eingeht und die Benachrichtigung noch vorhanden ist, entferne sie vom Bildschirm.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Unterstützte Browser
Die meisten Browser unterstützen die Geolocation API, aber es empfiehlt sich, die Unterstützung immer zu prüfen, bevor Sie etwas tun.
Sie können die Kompatibilität ganz einfach prüfen, indem Sie testen, ob das Geolocation-Objekt vorhanden ist:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Aktuellen Standort des Nutzers bestimmen
Die Geolocation API bietet eine einfache Methode, um den Standort des Nutzers zu ermitteln: getCurrentPosition(). Der Aufruf dieser Methode meldet asynchron den aktuellen Standort des Nutzers.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
Wenn eine Anwendung in dieser Domain zum ersten Mal Berechtigungen anfordert, prüft der Browser in der Regel, ob die Nutzereinwilligung vorliegt. Je nach Browser gibt es möglicherweise auch Einstellungen, mit denen Berechtigungsabfragen immer zugelassen oder abgelehnt werden. In diesem Fall wird der Bestätigungsprozess umgangen.
Je nachdem, welches Ortungsgerät Ihr Browser verwendet, kann das Positionsobjekt tatsächlich viel mehr als nur den Breiten- und Längengrad enthalten, z. B. die Höhe oder die Richtung. Sie können nicht wissen, welche zusätzlichen Informationen das Standortsystem verwendet, bis es die Daten tatsächlich zurückgibt.
Standort des Nutzers beobachten
Mit der Geolocation API können Sie den Standort des Nutzers (mit seiner Einwilligung) mit einem einzigen Aufruf von getCurrentPosition() abrufen.
Wenn Sie den Standort des Nutzers kontinuierlich überwachen möchten, verwenden Sie die Geolocation API-Methode watchPosition(). Er funktioniert ähnlich wie getCurrentPosition(), wird aber mehrmals ausgelöst, wenn die Positionierungssoftware:
- Der Nutzer wird genauer erfasst.
- Bestimmt, dass sich die Position des Nutzers ändert.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Wann die Standortbestimmung verwendet werden sollte, um den Standort des Nutzers zu beobachten
- Sie möchten den Standort des Nutzers genauer bestimmen.
- Ihre Anwendung muss die Benutzeroberfläche anhand der neuen Standortinformationen aktualisieren.
- Ihre Anwendung muss die Geschäftslogik aktualisieren, wenn der Nutzer eine bestimmte definierte Zone betritt.
Best Practices für die Verwendung der Standortbestimmung
Immer aufgeräumt und akkuschonend
Das Beobachten von Änderungen an einem Standort ist kein kostenloser Vorgang. Betriebssysteme bieten möglicherweise Plattformfunktionen, mit denen Anwendungen auf das Geo-Subsystem zugreifen können. Als Webentwickler wissen Sie jedoch nicht, welche Unterstützung das Gerät des Nutzers für die Überwachung des Standorts des Nutzers bietet. Außerdem wird das Gerät durch die Überwachung einer Position stark beansprucht.
Wenn Sie die Position des Nutzers nicht mehr erfassen müssen, rufen Sie clearWatch auf, um die Standortbestimmungssysteme zu deaktivieren.
Fehler elegant beheben
Leider sind nicht alle Standortabfragen erfolgreich. Möglicherweise konnte kein GPS-Signal gefunden werden oder der Nutzer hat die Standortermittlung plötzlich deaktiviert. Im Falle eines Fehlers wird ein zweites, optionales Argument für getCurrentPosition() aufgerufen, damit Sie den Nutzer im Callback benachrichtigen können:
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Bedarf an Hardware für die Standortbestimmung reduzieren
In vielen Anwendungsfällen benötigen Sie nicht den aktuellen Standort des Nutzers, sondern nur eine grobe Schätzung.
Mit der optionalen Property maximumAge können Sie den Browser anweisen, ein kürzlich erhaltenes Ergebnis der Standortbestimmung zu verwenden. Dadurch werden die Daten nicht nur schneller zurückgegeben, wenn der Nutzer sie zuvor angefordert hat, sondern es wird auch verhindert, dass der Browser seine Hardware-Schnittstellen für die Standortermittlung wie WLAN-Triangulation oder GPS startet.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Lassen Sie den Nutzer nicht warten, sondern legen Sie ein Zeitlimit fest
Wenn Sie kein Zeitlimit festlegen, wird Ihre Anfrage für die aktuelle Position möglicherweise nie zurückgegeben.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Ungefähren Standort gegenüber genauem Standort bevorzugen
Wenn Sie das nächstgelegene Geschäft für einen Nutzer finden möchten, ist eine Genauigkeit von 1 Meter wahrscheinlich nicht erforderlich. Die API ist so konzipiert, dass sie so schnell wie möglich einen ungefähren Standort zurückgibt.
Wenn Sie ein hohes Maß an Präzision benötigen, können Sie die Standardeinstellung mit der Option enableHighAccuracy überschreiben. Verwenden Sie diese Option sparsam, da die Auflösung länger dauert und mehr Akku verbraucht wird.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Standortermittlung mit den Chrome-Entwicklertools emulieren
Nachdem Sie die Standortbestimmung eingerichtet haben, sollten Sie Folgendes tun:
- Testen Sie, wie Ihre App an verschiedenen Standorten funktioniert.
- Prüfen Sie, ob Ihre App ordnungsgemäß funktioniert, wenn die Standortbestimmung nicht verfügbar ist.
Beides ist über die Chrome-Entwicklertools möglich.
- Öffnen Sie die Chrome-Entwicklertools.
- Drücken Sie Esc, um die Konsolenschublade zu öffnen.
- Menü „Konsolenleiste“ öffnen
- Klicke auf die Option Sensoren, um den Tab „Sensoren“ aufzurufen.
Hier können Sie den Standort mit einer voreingestellten Großstadt überschreiben, einen benutzerdefinierten Standort eingeben oder die Standortbestimmung deaktivieren, indem Sie die Überschreibung auf Standort nicht verfügbar setzen.