Coğrafi Konum: Haritalar'da Kullanıcının veya Cihazın Konumunu Görüntüleme

Genel bakış

Bu eğitim, Maps JavaScript API ile birlikte tarayıcınızın HTML5 Coğrafi Konum özelliğini kullanarak bir kullanıcının veya cihazın coğrafi konumunu bir Google haritasında nasıl görüntüleyeceğinizi gösterir. (Bir kullanıcının coğrafi konumunun, yalnızca konum paylaşımına izin verdiği takdirde görüntüleneceğini unutmayın.)

Aşağıda, mevcut konumunuzu belirleyebilecek bir harita bulunmaktadır.

Aşağıdaki örnekte, bu haritayı oluşturmak için ihtiyaç duyduğunuz kodun tamamı gösterilmektedir.

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;
Örneği görüntüleyin

Örneği Deneyin

Coğrafi konum nedir?

Coğrafi konum, bir kullanıcının veya bilgi işlem cihazının çeşitli veri toplama mekanizmaları aracılığıyla coğrafi konumunun belirlenmesini ifade eder. Tipik olarak, çoğu coğrafi konum hizmeti bu konumu belirlemek için ağ yönlendirme adreslerini veya dahili GPS cihazlarını kullanır. Coğrafi konum, cihaza özgü bir API'dir. Bu, tarayıcıların veya cihazların web uygulamaları aracılığıyla kullanılabilmeleri için coğrafi konumu desteklemeleri gerektiği anlamına gelir.

W3C Coğrafi Konum standardı

Coğrafi konum yapmak isteyen uygulamalar W3C Coğrafi Konum standardını desteklemelidir. Yukarıdaki örnek kodun, kullanıcının konumunu W3C navigator.geolocation mülkü aracılığıyla belirlediğine dikkat edin.

Bazı tarayıcılar, bir kullanıcının konumunu algılamak için IP adreslerini kullanır. Ancak, kullanıcının konumuna dair yalnızca kaba bir tahmin sağlayabilir. W3C yaklaşımı en kolay ve en tamamen desteklenen yöntemdir. Bu nedenle, diğer coğrafi konum yöntemlerine göre öncelikli olmalıdır.