Beispielerklärung für die HTML5-Geolokalisierung

HTML5 Geolocation wird verwendet, um den Standort des Benutzers zu lokalisieren.

Lokalisieren Sie den Standort des Benutzers

HTML5 Geolocation API wird verwendet, um den geografischen Standort des Benutzers zu ermitteln.

Da diese Funktion möglicherweise die Privatsphäre des Benutzers verletzt, sind Informationen zum Benutzerstandort nicht verfügbar, es sei denn, der Benutzer stimmt zu.

Browser-Unterstützung

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

Hinweis: Geolokalisierung ist für Benutzer mit GPS-Geräten wie dem iPhone erforderlich , haben eine genauere Geolokalisierung.

HTML5 – Geolocation verwenden

Bitte verwenden Sie die Methode getCurrentPosition(), um den Standort des Benutzers zu ermitteln.

Das folgende Beispiel ist ein einfaches Geolocation-Beispiel, das den Längen- und Breitengrad des Standorts des Benutzers zurückgibt:

Beispiel

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

Beispielanalyse:

Überprüfen Sie, ob die Geolokalisierung unterstützt wird.

Wenn dies unterstützt wird, führen Sie die Methode getCurrentPosition() aus. Wenn dies nicht unterstützt wird, wird dem Benutzer eine Meldung angezeigt.

Wenn getCurrentPosition() erfolgreich ausgeführt wird, wird ein Koordinatenobjekt an die im Parameter showPosition angegebene Funktion zurückgegeben

Die Funktion showPosition() ruft den Längen- und Breitengrad ab und zeigt ihn an

Das obige Beispiel ist ein sehr einfaches Geolocation-Skript ohne Fehlerbehandlung. 3bb3ba5d8a8c1e677360c9d603cb067b 🎜>

Ergebnisse auf der Karte anzeigen

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }

Um Ergebnisse auf der Karte anzuzeigen, müssen Sie auf einen Kartendienst zugreifen, der Breiten- und Längengrade verwenden kann, z. B. Google Maps oder Baidu Maps:

Im obigen Beispiel verwenden wir die zurückgegebenen Breiten- und Längengraddaten, um den Standort in Google Maps anzuzeigen (unter Verwendung eines statischen Bildes).

Google Maps-Skript

Der Link oben zeigt Ihnen, wie Sie ein Skript verwenden, um eine interaktive Karte mit Markierungen, Zoom- und Ziehoptionen anzuzeigen.

Informationen für einen bestimmten Standort

Diese Seite zeigt, wie der Standort des Benutzers auf einer Karte angezeigt wird. Die Geolokalisierung ist jedoch auch nützlich, um Informationen über einen bestimmten Standort zu erhalten.

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=&#39;"+img_url+"&#39;>";
}

Beispiel:

Lokale Informationen aktualisieren

Sehenswürdigkeiten in der Umgebung des Benutzers anzeigen

Interaktives Autonavigationssystem (GPS)

getCurrentPosition ()-Methode – Daten zurückgeben

T Bei Erfolg gibt die getCurrentPosition()-Methode das Objekt zurück. Die Eigenschaften Breite, Länge und Genauigkeit werden immer zurückgegeben.

Geolocation-Objekt – Andere interessante Methoden

watchPosition() – Gibt die aktuelle Position des Benutzers zurück und gibt weiterhin aktualisierte Positionen zurück, wenn sich der Benutzer bewegt (wie ein GPS in einem Auto).

clearWatch() – Stoppt die watchPosition()-Methode

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

【Verwandte Empfehlungen】

1 🎜>

:

Download der Version „php Programmer Toolbox“ V0.1

2. Kostenloses h5-Online-Video-Tutorial

3 php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBeispielerklärung für die HTML5-Geolokalisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!