Geolokalizacja: wyświetlanie pozycji użytkownika lub urządzenia na mapie

Omówienie

W tym samouczku pokazujemy, jak wyświetlić położenie geograficzne urządzenia na mapie Google, korzystając z funkcji geolokalizacji HTML5 w przeglądarce oraz interfejsu Maps JavaScript API. Lokalizacja geograficzna będzie wyświetlana tylko wtedy, gdy użytkownik zezwoli na udostępnianie lokalizacji.

Gdy użytkownik uruchomi żądanie geolokalizacji, przeglądarka poprosi go o zgodę na dostęp do danych o lokalizacji urządzenia. Jeśli żądanie się nie powiedzie, może to być spowodowane odrzuceniem uprawnień do lokalizacji lub niemożnością określenia lokalizacji urządzenia. Ta funkcja jest dostępna tylko w kontekstach bezpiecznych (HTTPS) w niektórych lub wszystkich obsługiwanych przeglądarkach.

Poniżej znajduje się mapa, na której można zobaczyć aktualną lokalizację urządzenia użytkownika.

Przykład poniżej zawiera 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;
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
Zobacz przykład

Wypróbuj próbkę

Co to jest geolokalizacja?

Geolokalizacja to identyfikacja geograficznej lokalizacji urządzenia komputerowego za pomocą różnych mechanizmów gromadzenia danych. Zwykle większość usług geolokalizacji używa adresów routingu sieci lub wewnętrznych układów GPS do określania lokalizacji. Geolokalizacja to interfejs API dla konkretnego urządzenia. Oznacza to, że przeglądarki lub urządzenia muszą obsługiwać geolokalizację, aby można było z niej korzystać w aplikacji internetowej.

Standard W3C dotyczący geolokalizacji

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

Czasami witryny używają adresów IP do wykrywania lokalizacji urządzenia, ale może to być tylko przybliżona lokalizacja. Interfejsy API zgodne ze standardem W3C są najbardziej dokładne i najlepiej obsługiwane, dlatego powinny być traktowane priorytetowo w stosunku do innych metod lokalizowania geograficznego.