Geolokalizacja: wyświetlanie pozycji użytkownika lub urządzenia w Mapach

Opis

W tym samouczku pokazujemy, jak wyświetlić lokalizację geograficzną użytkownika lub urządzenia na mapie Google przy użyciu funkcji geolokalizacji HTML5 w przeglądarce oraz interfejsu Maps JavaScript API. Lokalizacja geograficzna użytkownika jest wyświetlana tylko wtedy, gdy zezwolił on na udostępnianie lokalizacji.

Poniżej znajduje się mapa, na której możesz zobaczyć swoją aktualną lokalizację.

Przykład poniżej pokazuje cały kod potrzebny do utworzenia tej mapy.

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;

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;
Zobacz przykład

Wypróbuj fragment

Co to jest geolokalizacja?

Geolokalizacja odnosi się do identyfikacji położenia geograficznego użytkownika lub urządzenia obliczeniowego za pomocą różnych mechanizmów gromadzenia danych. Zwykle większość usług geolokalizacji określa tę lokalizację na podstawie adresów routingu sieci lub wewnętrznych urządzeń GPS. Geolokalizacja to interfejs API przeznaczony dla danego urządzenia. Oznacza to, że przeglądarki lub urządzenia muszą obsługiwać geolokalizację, aby korzystać z niej w aplikacjach internetowych.

Standard geolokalizacji W3C

Aplikacje, które mają wykonywać geolokalizację, muszą obsługiwać standard geolokalizacji W3C. Zwróć uwagę, że przykładowy kod powyżej określa lokalizację użytkownika za pomocą właściwości navigator.geolocation W3C.

Niektóre przeglądarki na podstawie adresów IP wykrywają lokalizację użytkownika. Może jednak być tylko przybliżona przybliżona lokalizacja użytkownika. Metoda W3C jest najprostsza i najpełniejsza z obsługą, dlatego należy ją traktować priorytetowo względem innych metod geolokalizacji.