English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Geolocation (Geolokalisierung) wird verwendet, um die Position des Benutzers zu bestimmen.
HTML5 Das Geolocation API wird verwendet, um die geografische Lage des Benutzers zu ermitteln.
Da diese Funktion die Privatsphäre des Benutzers verletzen könnte, sind Informationen über die Benutzerposition ohne Zustimmung des Benutzers nicht verfügbar.
Internet Explorer 9+, Firefox, Chrome, Safari und Opera unterstützen Geolocation (Geolokalisierung).
Hinweis: Geolocation (Geolokalisierung) ist für Geräte mit GPS, wie z.B. iPhone, genauer.
Verwenden Sie die Methode getCurrentPosition() zur Erstellung der Benutzerposition.
Nachfolgend ist ein einfaches Beispiel für die Geolokalisierung aufgeführt, das die Längengrad- und Breitengradkoordinaten der Benutzerposition zurückgibt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</>title>
</>head>
<body>
<p id="demo">Klicke auf den Button, um deine aktuelle Position zu erhalten (es könnte einige Zeit dauern, bis die Position ermittelt wird):</>p>
<button onclick="getLocation()">Klicke mich</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="Dieser Browser unterstützt das Abrufen von Geolokalisierung nicht.";
}
}
function showPosition(position)
{
x.innerHTML="Geografische Breite: " + position.coords.latitude +
"<br>Geografische Länge: " + position.coords.longitude;
}
</script>
</body>
</html>Testen Sie heraus, ob es funktioniert ‹/›Beispielanalyse:
Überprüfen Sie, ob Geolokalisierung unterstützt wird
Führt.getCurrentPosition() aus, wenn unterstützt. Wenn nicht unterstützt, wird eine Nachricht an den Benutzer angezeigt.
Wenn getCurrentPosition() erfolgreich ausgeführt wird, wird ein coordinates-Objekt an die Funktion zurückgegeben, die im Parameter showPosition angegeben ist
Die Funktion showPosition() erhält und zeigt die Längs- und Breitengrade an
Das obige Beispiel ist ein sehr einfaches Skript für Geolokalisierung, ohne Fehlerbehandlung.
Der zweite Parameter der Methode getCurrentPosition() wird verwendet, um Fehler zu behandeln. Er bestimmt die Funktion, die ausgeführt wird, wenn der Benutzerstandort nicht erfolgreich abgerufen wird:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlegende Anleitung(oldtoolbag.com)</>title>
</>head>
<body>
<p id="demo">Klicke auf den Button, um deine aktuelle Position zu erhalten (es könnte einige Zeit dauern, bis die Position ermittelt wird):</>p>
<button onclick="getLocation()">Klicke mich</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="Dieser Browser unterstützt keine Lokalisierung.";
}
}
function showPosition(position)
{
x.innerHTML="Geografische Breite: " + position.coords.latitude +
"<br>Geografische Länge: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="Der Benutzer hat die Anfrage zur Bereitstellung von Standortinformationen abgelehnt.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Die Standortinformationen sind nicht verfügbar.";
break;
case error.TIMEOUT:
x.innerHTML="Anfrage nach Benutzerort abgelaufen."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Unbekannter Fehler."
break;
}
}
</script>
</body>
</html>Testen Sie heraus, ob es funktioniert ‹/›Fehlercode:
Permission denied - Der Benutzer hat die Geolokalisierung nicht erlaubt
Position unavailable - Standort nicht verfügbar
Timeout - Aktion timed out
Um die Ergebnisse auf der Karte anzuzeigen, müssen Sie auf eine Karte mit Koordinaten zugreifen, wie z.B. Google Maps oder Baidu Maps:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlegende Anleitung(oldtoolbag.com)</>title>
</>head>
<body>
<p id="demo">Klicke auf den Button, um deine aktuelle Position zu erhalten (es könnte einige Zeit dauern, bis die Position ermittelt wird):</>p>
<button onclick="getLocation()">Klicke mich</button>
<div id="mapholder"></div>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="Dieser Browser unterstützt das Abrufen von Geolokalisierung nicht.";
}
}
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="Der Benutzer hat die Anfrage zur Bereitstellung von Standortinformationen abgelehnt.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Die Standortinformationen sind nicht verfügbar.";
break;
case error.TIMEOUT:
x.innerHTML="Anfrage nach Benutzerort abgelaufen."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Unbekannter Fehler."
break;
}
}
</script>
</body>
</html>Testen Sie heraus, ob es funktioniert ‹/›Im obigen Beispiel zeigen wir die Position mit den zurückgegebenen Längen- und Breitengraden auf einer Google Karte an (verwendet statische Bilder).
Google Maps Script
Die obigen Links zeigen dir, wie du ein interaktives Karte mit Markern, Zoom- und Drag-Optionen mit JavaScript anzeigst.
Diese Seite demonstriert, wie man die Position des Benutzers auf einer Karte anzeigt. Allerdings ist die Geolokalisierung auch sehr nützlich für Informationen zu bestimmten Positionen.
Beispiel:
Aktualisiere lokale Informationen
Zeige interessante Punkte in der Nähe des Benutzers an
Interaktives Navigationssystem im Fahrzeug (GPS)
Wenn erfolgreich, gibt die Methode getCurrentPosition() ein Objekt zurück. Es werden stets die Eigenschaften latitude, longitude und accuracy zurückgegeben. Wenn verfügbar, werden zusätzliche Eigenschaften wie unten aufgeführt zurückgegeben.
| Eigenschaft | Beschreibung |
| coords.latitude | Dezimalzahl der Breite |
| coords.longitude | Dezimalzahl des Longitudes |
| coords.accuracy | Positionspräzision |
| coords.altitude | Höhe, in Metern über dem Meeresspiegel |
| coords.altitudeAccuracy | Höhenpräzision der Position |
| coords.heading | Richtung, beginnend vom Norden, in Grad |
| coords.speed | Geschwindigkeit, in Metern/pro Sekunde |
| timestamp | Antwortdatum/Zeit |
watchPosition() - Gib die aktuelle Position des Benutzers zurück und fortlaufend die aktualisierten Positionen zurück, wenn der Benutzer sich bewegt (wie ein GPS im Auto).
clearWatch() - Beende die Methode watchPosition()
Der folgende Beispiel zeigt die Methode watchPosition(). Du benötigst ein genaues GPS-Gerät, um dieses Beispiel zu testen (z.B. iPhone):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlegende Anleitung(oldtoolbag.com)</>title>
</>head>
<body>
<p id="demo">Klicke auf den Button, um deine aktuelle Position zu erhalten (es könnte einige Zeit dauern, bis die Position ermittelt wird):</>p>
<button onclick="getLocation()">Klicke mich</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
x.innerHTML="Dieser Browser unterstützt das Abrufen von Geolokalisierung nicht.";
}
}
function showPosition(position)
{
x.innerHTML="Geografische Breite: " + position.coords.latitude +
"<br>Geografische Länge: " + position.coords.longitude;
}
</script>
</body>
</html>Testen Sie heraus, ob es funktioniert ‹/›