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

Przegląd

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

Gdy użytkownik uruchomi żądanie geolokalizacji, przeglądarka wyświetli prośbę o zgodę na dostęp do danych o lokalizacji urządzenia. Jeśli żądanie nie zostanie zrealizowane, przyczyną może być odmowa dostępu do lokalizacji lub urządzenie nie może określić swojej lokalizacji. Ta funkcja jest dostępna tylko w kontekście zabezpieczeń (HTTPS) w niektórych lub wszystkich obsługiwanych przeglądarkach.

Poniżej znajduje się mapa, która może wskazać bieżącą lokalizację urządzenia użytkownika.

Poniższy przykład zawiera cały kod potrzebny do utworzenia tej mapy.

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

Co to jest geolokalizacja?

Geolokalizacja określa położenie geograficzne urządzenia komputerowego przy użyciu różnych mechanizmów zbierania danych. Zwykle większość usług geolokalizacji określa tę lokalizację na podstawie adresów routingu sieciowego lub wewnętrznych układów GPS. Geolokalizacja to interfejs API przeznaczony do konkretnego urządzenia. Oznacza to, że przeglądarki i urządzenia muszą obsługiwać geolokalizację, aby korzystać z niej w aplikacjach internetowych.

Standard geolokalizacji W3C

Aplikacje, które chcą przeprowadzać geolokalizację, muszą obsługiwać standard geolokalizacji W3C. Zwróć uwagę, że przykładowy kod powyżej określa lokalizację urządzenia za pomocą interfejsu API W3C navigator.geolocation.

Czasami witryny używają adresów IP do wykrywania lokalizacji urządzenia, ale na tej podstawie można określić tylko przybliżoną lokalizację. Interfejsy API zgodne ze standardem W3C są najbardziej w pełni obsługiwane i najdokładniejsze, dlatego należy je traktować priorytetowo niż inne metody geolokalizacji.