HTML5-Geolokalisierung

HTML5 Geolocation (Geolokalisierung) wird verwendet, um den Standort des Benutzers zu bestimmen.

Versuchen Sie es selbst: Zeigen Sie Ihren Standort auf Google Maps an

Position des Benutzers bestimmen

Das HTML5 Geolocation API wird verwendet, um den Standort des Benutzers zu erhalten.

Da diese Funktion möglicherweise die Privatsphäre des Benutzers verletzt, sind Standortinformationen des Benutzers ohne Zustimmung des Benutzers nicht verfügbar.

Browser-Unterstützung

Internet Explorer 9, Firefox, Chrome, Safari und Opera unterstützen Geolokalisierung.

Anmerkung:Für Geräte mit GPS, wie z.B. iPhone, ist die Geolokalisierung präziser.

HTML5 - Geolokalisierung verwenden

Verwenden Sie die Methode getCurrentPosition(), um den Standort des Benutzers zu erhalten.

Das folgende Beispiel ist ein einfaches Beispiel für Geolokalisierung, das die Länge und Breite des Benutzerstandorts zurückgibt.

Beispiel

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation wird von diesem Browser nicht unterstützt.";}
  }
function showPosition(position)
  {
  x.innerHTML="Breitengrad: " + position.coords.latitude +
  "<br />Längengrad: " + position.coords.longitude;
  }
</script>

Versuchen Sie es selbst

Beispiel Erklärung:

  • Überprüfen Sie, ob Geolokalisierung unterstützt wird
  • Falls unterstützt, wird die Methode getCurrentPosition() ausgeführt. Falls nicht unterstützt, wird eine Nachricht an den Benutzer angezeigt.
  • Falls 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änge und Breite des Ortes an

Der obige Beispiel ist ein sehr einfaches Skript für Geolokalisierung, ohne Fehlerbehandlung.

Fehler und Ablehnung behandeln

Der zweite Parameter der Methode getCurrentPosition() wird verwendet, um Fehler zu behandeln. Er legt fest, welche Funktion ausgeführt wird, wenn der Benutzerstandort nicht erfolgreich abgerufen wird:

Beispiel

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Der Benutzer hat die Anfrage für die Geolokalisierung abgelehnt."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Ortinformation ist nicht verfügbar."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

Versuchen Sie es selbst

错误代码：

  • Permission denied - 用户不允许地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

在地图中显示结果

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：

Beispiel

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+"' />";
}

Versuchen Sie es selbst

在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。

谷歌地图脚本

上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

给定位置的信息

本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。

案例：

  • 更新本地信息
  • 显示用户周围的兴趣点
  • 交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据

如果成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，以米计，相对于海平面
coords.altitudeAccuracy Höhenpräzision der Position
coords.heading Richtung, beginnend mit dem Nordpolar Stern, in Grad gemessen
coords.speed Geschwindigkeit, in Metern pro Sekunde berechnet
timestamp Antwortendes Datum/Zeit

Geolocation-Objekt - andere interessante Methoden

watchPosition() - Gibt die aktuelle Position des Benutzers zurück und gibt weiterhin Updates zurück, wenn der Benutzer sich bewegt (wie ein GPS im Auto).

clearWatch() - Beenden der Methode watchPosition()

Der folgende Beispiel zeigt die Methode watchPosition(). Sie benötigen ein genaues GPS-Gerät, um dieses Beispiel zu testen (z.B. iPhone):

Beispiel

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation wird von diesem Browser nicht unterstützt.";}
  }
function showPosition(position)
  {
  x.innerHTML="Breitengrad: " + position.coords.latitude +
  "<br />Längengrad: " + position.coords.longitude;
  }
</script>

Versuchen Sie es selbst