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

Omówienie

W tym samouczku pokazujemy, jak wyświetlić lokalizację geograficzną urządzenia na mapie Google, używając funkcję geolokalizacji HTML5 w przeglądarce wraz z interfejsem 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, przeglądarka wyświetli prośbę o potwierdzenie w celu uzyskania zgody na dostęp do danych o lokalizacji urządzenia. Jeśli żądanie nie powiedzie się, może to być spowodowane tym, że: odmówiono dostępu do lokalizacji lub urządzenie nie mogło 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.

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

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

Uwaga: JavaScript jest kompilowany z fragmentu kodu TypeScript.

Zobacz przykład

Zobacz próbkę

JSFiddle.net Google Cloud Shell,

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 używa sieci adresów routingu lub wewnętrznych układów GPS w celu określenia tej lokalizacji. Geolokalizacja to interfejsu API przeznaczonego do konkretnego urządzenia. Oznacza to, że przeglądarki lub urządzenia muszą obsługiwać geolokalizację, aby korzystać w aplikacjach internetowych.

Standard geolokalizacji W3C

Aplikacje, które chcą korzystać z geolokalizacji, muszą obsługiwać Standard geolokalizacji W3C. Zwróć uwagę, że przykładowy kod powyżej określa lokalizację urządzenia przez W3C Interfejs API navigator.geolocation.

Czasami strony internetowe używają adresów IP do wykrywania lokalizacji urządzenia, ale tylko wtedy, przybliżone oszacowanie tej lokalizacji. Interfejsy API zgodne ze standardem W3C są najbardziej w pełni obsługiwane i najdokładniejsze, więc powinny być mają wyższy priorytet niż inne metody geolokalizacji.