Web Konum API'si

Kullanıcının konumunu belirleme

HTML Konum API'si, kullanıcının konumunu almak için kullanılır.

Bu, gizliliği ihlal edebileceği için, kullanıcı onay vermeden önce konum kullanılamaz.

Kişisel olarak deneyin

Not:GPS ile donatılmış cihazlar (örneğin akıllı telefonlar) için coğrafi konumlandırma en doğru olacaktır.

Tüm tarayıcılar Geolocation API'yi destekler:

Chrome IE Firefox Safari Opera
Destekleniyor Destekleniyor Destekleniyor Destekleniyor Destekleniyor

Not:Chrome 50'den itibaren, Geolocation API yalnızca güvenli bağlamlarda (örneğin HTTPS) geçerli olacaktır. Web siteniz güvenli bir kaynaktan (örneğin HTTP) barındırılıyorsa, kullanıcı konumunu almak için yapılan istekler artık çalışmayacaktır.

Geolocation API'yi kullanma

getCurrentPosition() Yöntem, kullanıcının konumunu döndürmek için kullanılır.

Aşağıdaki örnek, kullanıcının enlem ve boylamını döndürür:

Örnek

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Bu tarayıcı Geolocation desteklemiyor.";
  }
}
function showPosition(position) {
  x.innerHTML = "Enlem: " + position.coords.latitude +
  "<br>Boylam: " + position.coords.longitude;
}
</script>

Kişisel olarak deneyin

Örnek açıklaması:

  1. Geolocation'u destekliyor mu kontrol edin
  2. Destekleniyorsa, getCurrentPosition() yöntemini çalıştırın. Desteklenmiyorsa, kullanıcıya bir mesaj gösterin
  3. getCurrentPosition() yöntemi başarılıysa, koordinatlar nesnesini (showPosition) parametresinde belirtilen fonksiyona döndürür
  4. showPosition() fonksiyonu enlem ve boylamı çıktı verir

Yukarıdaki örnek, hata işleme içermeyen çok temel bir coğrafi konumlama betiğidir.

Hata ve reddi işlemek

getCurrentPosition() Yöntemin ikinci parametresi hataları işlemek için kullanılır. Kullanıcı konumunu alamadığında çalıştırılacak fonksiyonu belirler:

Örnek

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Kullanıcı Konumlandırma talebini reddetti.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Konum bilgisi kullanılamıyor.";
      break;
    case error.TIMEOUT:
      x.innerHTML = "Kullanıcı konumunu almak için yapılan istek zaman aşımına uğradı.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Bir bilinmeyen hata meydana geldi.";
      break;
  }
}

Kişisel olarak deneyin

Harita üzerinde sonuçları göster

Harita üzerinde sonuçları göstermek için harita hizmetine erişmeniz gerekmektedir, örneğin Google Haritaları.

Aşağıdaki örnekte, dönen enlem ve boylam, Google Haritalar'ın üzerinde konumu göstermek için kullanılır (statik görsel kullanılarak):

Örnek

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Konumsal bilgiler

Bu sayfa, haritada kullanıcı konumunu nasıl gösterdiğinizi gösterir.

Geolocation, konumsal özel bilgiler için de çok faydalıdır, örneğin:

  • En son yerel bilgiler
  • Kullanıcının yakınındaki ilgi noktalarını göster
  • Adım adım navigasyon (Turn-by-turn navigation) (GPS)

getCurrentPosition() yöntemi - Dönen veriler

getCurrentPosition() Başarı durumunda bir nesne döndüren yöntemler. Her zaman enlem, boylam ve doğruluk özelliklerini döndürür. Daha fazla özellik varsa döndürülür:

Özellikler Döndür
coords.latitude Ondalık sayısal enlem (her zaman döndürülür).
coords.longitude Ondalık sayısal boylam (her zaman döndürülür).
coords.accuracy Konum doğruluğu (her zaman döndürülür).
coords.altitude Ortalama deniz seviyesinin üzerindeki yükseklik (metre cinsinden) (varsa döndürülür).
coords.altitudeAccuracy Konumun yükseklik doğruluğu (varsa döndürülür).
coords.heading Kuzeyden başlayarak saat yönünde yön (varsa döndürülür).
coords.speed Metre/canlı hız (varsa döndürülür).
timestamp Cevap verilen tarih/saat (varsa döndürülür).

Geolocation nesnesi - Diğer ilginç yöntemler

Geolocation nesnesi diğer ilginç yöntemlere de sahiptir:

  • watchPosition() - Kullanıcının mevcut konumunu döndür ve kullanıcı hareket ederken (örneğin, araç içindeki GPS) güncellenen konumu döndürmeye devam edin。
  • clearWatch() - watchPosition () yöntemini durdurun。

Aşağıdaki örnekler şunları gösterir: watchPosition() Yöntem. Test etmek için doğru GPS cihazına ihtiyacınız olacaktır (örneğin, akıllı telefon):

Örnek

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Bu tarayıcı Geolocation desteklemiyor.";
  }
}
function showPosition(position) {
  x.innerHTML = "Enlem: " + position.coords.latitude +
  "<br>Boylam: " + position.coords.longitude;
}
</script>

Kişisel olarak deneyin