Standortbestimmung: Nutzer- oder Gerätepositionen auf Karten anzeigen

Überblick

In dieser Anleitung erfahren Sie, wie Sie den geografischen Standort eines Geräts mithilfe der HTML5-Standortbestimmungsfunktion Ihres Browsers und der Maps JavaScript API auf einer Google Maps-Karte darstellen können. Der geografische Standort wird nur angezeigt, wenn der Nutzer die Standortfreigabe aktiviert hat.

Wenn der Nutzer die Standortanfrage auslöst, wird er vom Browser aufgefordert, dem Zugriff auf die Standortdaten des Geräts zuzustimmen. Wenn die Anfrage fehlschlägt, wurde möglicherweise die Berechtigung zur Standortermittlung 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.

TypeScript

// 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

JavaScript

// 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
Beispiel ansehen

Testbeispiel

Was ist die Standortbestimmung?

Der Begriff Standortbestimmung bezieht sich auf die Ermittlung des geografischen Standorts eines Rechengeräts mithilfe verschiedener Datenerfassungsmechanismen. Die meisten Dienste zur Standortbestimmung verwenden dazu Netzwerkroutingadressen oder interne GPS-Chips. 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. Im Beispielcode oben wird der Standort des Geräts über die W3C navigator.geolocation API bestimmt.

Manchmal verwenden Websites IP-Adressen, um den Standort eines Geräts zu ermitteln. Diese Informationen ermöglichen jedoch nur eine grobe Schätzung. W3C-Standard-APIs sind am umfassendsten und am genauesten. Daher sollten sie gegenüber anderen Methoden zur Standortbestimmung priorisiert werden.