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

Przegląd

Ten samouczek pokazuje, jak wyświetlić lokalizację geograficzną urządzenia na mapie Google, korzystając z funkcji geolokalizacji HTML5 w przeglądarce oraz interfejsu Maps JavaScript API. Lokalizacja geograficzna jest wyświetlana tylko wtedy, gdy użytkownik zezwolił na udostępnianie lokalizacji.

Gdy użytkownik wywoła żądanie geolokalizacji, otrzyma od przeglądarki prośbę o zgodę na dostęp do danych o lokalizacji urządzenia. Jeśli żądanie nie zostanie zrealizowane, możliwe, że odmowa dostępu do lokalizacji lub urządzenie nie może określić jego lokalizacji. Ta funkcja jest dostępna tylko w bezpiecznym kontekście (HTTPS) w niektórych lub wszystkich obsługiwanych przeglądarkach.

Poniżej znajduje się mapa, która pozwala określić bieżącą lokalizację urządzenia użytkownika.

Przykład poniżej pokazuje 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 odnosi się do określania położenia geograficznego urządzenia komputerowego 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 układów GPS. Geolokalizacja to interfejs API specyficzny dla urządzenia. Oznacza to, że przeglądarki i urządzenia muszą obsługiwać geolokalizację, aby można było z niej korzystać w aplikacjach internetowych.

Standard geolokalizacji W3C

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

Czasami witryny używają adresów IP do wykrywania lokalizacji urządzenia, ale może to być tylko przybliżone oszacowanie. Interfejsy API zgodne ze standardem W3C są najbardziej w pełni obsługiwane i najdokładniejsze, dlatego powinny mieć wyższy priorytet niż inne metody geolokalizacji.