HTML5-Geolokalisierung

HTML5 Geolocation (Geolokalisierung) wird verwendet, um die Position des Benutzers zu bestimmen.

Probieren Sie es selbst aus: Zeigen Sie Ihre Position auf Google Maps an

Bestimmen Sie die Position des Benutzers

Das HTML5 Geolocation API wird verwendet, um die geografische Lage des Benutzers zu erhalten.

Da diese Funktion das Datenschutzrecht des Benutzers verletzen könnte, sind die Standortinformationen des Benutzers ohne Zustimmung des Benutzers nicht verfügbar.

Browser-Unterstützung

Internet Explorer 9, Firefox, Chrome, Safari und Opera unterstützen die 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 die Position des Benutzers zu erhalten.

Das folgende Beispiel ist ein einfaches Beispiel zur Geolokalisierung, das die Längs- und Breitengrade der Benutzerposition 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>

Selbst ausprobieren

Beispiel Erklärung:

  • Überprüfen Sie, ob Geolokalisierung unterstützt wird
  • Falls die Methode getCurrentPosition() unterstützt wird, wird sie ausgeführt. Falls nicht, wird eine Nachricht an den Benutzer angezeigt.
  • Falls getCurrentPosition() erfolgreich ausgeführt wird, wird ein coordinates-Objekt an die Funktion zurückgegeben, die in showPosition() angegeben ist
  • Die Funktion showPosition() erhält und zeigt die Längs- und Breitengrade an

Das obige Beispiel ist ein sehr einfaches Skript zur Geolokalisierung, das keine Fehlerbehandlung enthält.

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 die Bestimmung der Benutzerposition fehlschlägt:

Beispiel

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Der Benutzer hat die Anfrage zur Geolokalisierung abgelehnt."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Information zur Standortbestimmung ist nicht verfügbar."
      break;
    case error.TIMEOUT:
      x.innerHTML="获取用户位置的请求超时了。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="发生了一个未知错误。"
      break;
    }
  }

Selbst ausprobieren

错误代码：

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

Selbst ausprobieren

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

谷歌地图脚本

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

给定位置的信息

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

案例：

  • 更新本地信息
  • 显示用户周围的兴趣点
  • 交互式车载导航系统 (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 vom Nordpól in Grad
coords.speed Geschwindigkeit, in Metern pro Sekunde
timestamp Antwortende 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 präzises 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>

Selbst ausprobieren