Standortbestimmung: Nutzer- oder Gerätepositionen auf Karten anzeigen

Übersicht

In dieser Anleitung erfahren Sie, wie Sie den geografischen Standort eines Geräts mithilfe der HTML5-Standortbestimmung 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 Anfrage zur Standortbestimmung auslöst, wird er vom Browser aufgefordert, seine Einwilligung zum Zugriff auf die Standortdaten des Geräts zu erteilen. Wenn die Anfrage fehlschlägt, kann das daran liegen, dass die Berechtigungen zur Standortermittlung abgelehnt wurden oder dass der Standort des Geräts nicht ermittelt werden konnte. Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützten Browsern verfügbar.

Unten sehen Sie eine Karte, auf der der aktuelle Standort des Geräts des Nutzers ermittelt 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 Geräts über eine Vielzahl von Datenerhebungsmechanismen. Die meisten Dienste nutzen Netzwerkroutingadressen oder interne GPS-Chips zur Bestimmung des Standorts. 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. Dies kann jedoch nur eine grobe Schätzung dieses Standorts liefern. W3C-Standard-APIs sind am weitesten verbreitet und am genauesten. Daher sollten sie gegenüber anderen Verfahren zur Standortbestimmung priorisiert werden.