Standortbestimmung: Nutzer- oder Gerätepositionen auf Karten anzeigen

Übersicht

In dieser Anleitung erfahren Sie, wie Sie den geografischen Standort eines Geräts mithilfe von die HTML5-Standortbestimmungsfunktion Ihres Browsers zusammen mit der Maps JavaScript API verwenden. Die Der geografische Standort wird nur angezeigt, wenn der Nutzer die Standortfreigabe aktiviert hat.

Wenn der Nutzer die Standortanfrage auslöst, erhält er eine entsprechende Aufforderung im Browser. um die Einwilligung für den Zugriff auf die Standortdaten des Geräts einzuholen. Wenn die Anfrage fehlschlägt, Die Berechtigung zur Standortermittlung wurde verweigert oder das Gerät konnte seinen Standort nicht ermitteln. Diese Funktion ist nur in einem sicheren Kontext (HTTPS) und in einigen oder allen unterstützten Browsern verfügbar.

Unten sehen Sie eine Karte, auf der der aktuelle Standort des Geräts des Nutzers angezeigt werden kann.

Im folgenden Beispiel wird der gesamte Code angezeigt, den Sie zum Erstellen dieser Karte benötigen.

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);

  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position: GeolocationPosition) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter()!);
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter()!);
    }
  });
}

function handleLocationError(
  browserHasGeolocation: boolean,
  infoWindow: google.maps.InfoWindow,
  pos: google.maps.LatLng
) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        },
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation.",
  );
  infoWindow.open(map);
}

window.initMap = initMap;
index.js

Was ist die Standortbestimmung?

Der Begriff „Standortbestimmung“ bezieht sich auf die Ermittlung des geografischen Standorts eines Computers. mithilfe verschiedener Datenerfassungsmechanismen. Die meisten Dienste zur Standortbestimmung nutzen in der Regel ein Netzwerk Routenplanungsadressen oder interne GPS-Chips, um diesen Standort zu bestimmen. Die Geolocation API ist gerätespezifisch. Das bedeutet, dass Browser oder Geräte die Standortbestimmung unterstützen müssen, damit sie über Webanwendungen genutzt werden kann.

W3C-Standard zur Standortbestimmung

Anwendungen, die den Standort ermitteln sollen, müssen den W3C-Standard zur Standortbestimmung unterstützen. Beachten Sie, dass die Im obigen Beispielcode wird der Standort des Geräts über W3C bestimmt. navigator.geolocation-API.

Manchmal ermitteln Websites anhand von IP-Adressen den Standort eines Geräts. Dadurch wird jedoch möglicherweise nur eine eine grobe Schätzung dieses Standorts. W3C-Standard-APIs sind die am vollsten unterstützten und genauesten, daher sollten sie bevorzugt vor anderen Methoden zur Standortbestimmung.