HTML Geolocation API (Coğrafi Konum)

HTML Geolocation API’si bir kullanıcının konumunu bulmak için kullanılır.

Kullanıcının Konumunu Bulma

HTML Geolocation API’si bir kullanıcının coğrafi konumunu almak için kullanılır.

Bu durum gizliliği tehlikeye atabileceğinden, kullanıcı onaylamadığı sürece konum kullanılamaz.

Not: Coğrafi konum, akıllı telefonlar gibi GPS’li cihazlar için en doğru sonucu verir.

Tarayıcı Desteği

Coğrafi Konum’u tam olarak destekleyen ilk tarayıcı sürümleri aşağıdadır.

Not: Chrome 50’den itibaren Geolocation API yalnızca HTTPS gibi güvenli bağlamlarda çalışacaktır. Siteniz güvenli olmayan bir kaynakta (HTTP gibi) barındırılıyorsa, kullanıcıların konumunu alma istekleri artık çalışmayacaktır.

HTML Geolocation Kullanma

getCurrentPosition() yöntemi kullanıcının konumunu döndürmek için kullanılır.

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

<!DOCTYPE html>
<html>
<body>
 
<button onclick="getLocation()">Konumu Al</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation tarayıcınızı desteklemiyor.";
  }
}

function showPosition(position) {
  x.innerHTML = "Enlem: " + position.coords.latitude + 
  "<br>Boylam: " + position.coords.longitude;
}
</script>

</body>
</html>

Örnek Açıklaması;

  • Coğrafi Konumun desteklenip desteklenmediğini kontrol edin
  • Destekleniyorsa getCurrentPosition() yöntemini çalıştırın. değilse kullanıcıya bir mesaj görüntüleyin
  • getCurrentPosition() yöntemi başarılı olursa, (showPosition) parametresinde belirtilen işleve bir koordinat nesnesi döndürür.
  • showPosition() işlevi Enlem ve Boylamın çıktısını verir

Yukarıdaki örnek, hata işlemesi olmayan çok basit bir Coğrafi Konum görme yöntemidir.

Hataları ve Reddetmeleri Ele Alma

GetCurrentPosition() yönteminin ikinci parametresi hataları işlemek için kullanılır. Kullanıcının konumunu alamazsa çalıştırılacak işlevi belirtir:

<!DOCTYPE html>
<html>
<body>
 
<button onclick="getLocation()">Tıklayın</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Tarayıcınız bu özelliği desteklemiyor.";
  }
}

function showPosition(position) {
  x.innerHTML = "Enlem: " + position.coords.latitude + 
  "<br>Boylam: " + position.coords.longitude;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Kullanıcı Coğrafi Konum isteğini reddetti."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Konum bilgisi kullanılamıyor."
      break;
    case error.TIMEOUT:
      x.innerHTML = "Kullanıcı konumunu alma isteği zaman aşımına uğradı."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Bilinmeyen bir hata oluştu."
      break;
  }
}
</script>

</body>
</html>

Özel Konum Bilgileri

Bu sayfada bir kullanıcının konumunun harita üzerinde nasıl gösterileceği gösterilmiştir.

Coğrafi konum aynı zamanda aşağıdakiler gibi konuma özgü bilgiler için de oldukça kullanışlıdır:

  • Güncel yerel bilgiler
  • Kullanıcının yakınındaki ilgi çekici yerler
  • Adım adım navigasyon (GPS)

getCurrentPosition() Yöntemi – Veri Döndürme

getCurrentPosition() yöntemi başarı durumunda bir nesne döndürür. Enlem, boylam ve doğruluk özellikleri her zaman döndürülür. Varsa diğer özellikler döndürülür:

ÖzellikDönen Değer
coords.latitudeOndalık sayı olarak enlem (her zaman döndürülür)
coords.longitudeOndalık sayı olarak boylam (her zaman döndürülür)
coords.accuracyKonumun doğruluğu (her zaman döndürülür)
coords.altitudeOrtalama deniz seviyesinden metre cinsinden yükseklik (varsa döndürülür)
coords.altitudeAccuracyKonumun rakım doğruluğu (varsa döndürülür)
coords.headingKuzeyden saat yönünde derece cinsinden yön (varsa döndürülür)
coords.speedSaniyede metre cinsinden hız (varsa döndürülür)
timestampYanıtın tarihi/saati (varsa döndürülür)

Geolocation – Diğer İlginç Yöntemler

Geolocation nesnesinin başka ilginç yöntemleri de vardır:

watchPosition() – Kullanıcının mevcut konumunu döndürür ve kullanıcı hareket ettikçe güncellenen konumu döndürmeye devam eder (arabadaki GPS gibi).
clearWatch() – watchPosition() yöntemini durdurur.

Aşağıdaki örnek watchPosition() yöntemini göstermektedir. Bunu test etmek için doğru bir GPS cihazına ihtiyacınız var (akıllı telefon gibi):

<!DOCTYPE html>
<html>
<body>
<button onclick="getLocation()">Başla</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else { 
    x.innerHTML = "Tarayıcınız Desteklemiyor.";
  }
}
    
function showPosition(position) {
    x.innerHTML="Enlem: " + position.coords.latitude + 
    "<br>Boylam: " + position.coords.longitude;
}
</script>

</body>
</html>
18 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir