HTML5 Geolocation

Kullanıcının konum bilgisini bulmayı sağlayan Geolocation API ile konum bilgilerini almayı ve alınan bilgilerle harita üzerinde konum gösterme ile ilgili bilgiler yer alıyor.

HTML5 Geolocation API sayfanızı ziyaret eden kullanıcının konumunu bulmak için kullanılır.

Kullanıcıların gizlilik haklarını ihlal edebileceğinden kullanıcıya konum paylaşım onay ekranı gelir onaylamaz ise bilgiler alınmaz.

Geolocation kullanımı

Konum bilgileri navigator.geolocation nesnesi getCurrentPosition metodu ile alınır.

<script>
  function konumuGetir() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(konumuGoster);
    } else {
      document.write("Tarayıcınız Geolocation API desteklemiyor.");
    }
  }

  function konumuGoster(konum) {
    document.write("Enlem: " + konum.coords.latitude);
    document.write("<br />");
    document.write("Enlem: " + konum.coords.longitude);
  }

  konumuGetir();
</script>

Örneğin açıklaması;

• İlk olarak tarayıcının Geolocation API desteğini kontrol ettik.
• Tarayıcı Geolocation API destekliyorsa getCurrentPosition metodunu çalıştırdık.
• Tarayıcı desteklemiyorsa kullanıcıya bilgi verdik.
• getCurrentPosition metodu başarılı olursa, konum parametre nesnesi alan konumuGoster fonksiyonuna değerleri gönderdik.
• konumuGoster fonksiyonu içerisinde Enlem ve Boylamı yazdırdık.

Yukardaki basit kullanımda oluşabilecek hatalara karşı önlem alınmamıştır.

Geolocation hata yakalama

Geolocation API getCurrentPosition metodu ikinci parametresi konum bilgisini alırken kullanıcı onay vermediği, konumun bulunamadığı, zaman aşımı ve diğer durumlarda kullanıcıya bilgi vermek için kullanılır.

<script>
  function konumuGetir() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(konumuGoster, hataGoster);
    } else {
      document.write("Tarayıcınız Geolocation API desteklemiyor.");
    }
  }

  function konumuGoster(konum) {
    document.write("Enlem: " + konum.coords.latitude);
    document.write("<br />");
    document.write("Enlem: " + konum.coords.longitude);
  }

  function hataGoster(hata) {
    document.write(hata.message);
  }

  konumuGetir();
</script>

Geolocation konumu haritada görüntüleme

Geolocation API ile alınan enlem ve boylam bilgilerini Google, Bing, Yandex vb. harita hizmetlerine göndererek konumu harita üzerinde gösterebiliriz.

<div id="harita"></div>
<script src="https://maps.google.com/maps/api/js"></script>
<script>
  function konumuGetir() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(konumuGoster, hataGoster);
    } else {
      document.write("Tarayıcınız Geolocation API desteklemiyor.");
    }
  }

  function konumuGoster(konum) {
    enlem = konum.coords.latitude;
    boylam = konum.coords.longitude;
    latlon = new google.maps.LatLng(enlem, boylam)
    harita = document.getElementById('harita')
    harita.style.height = '500px';
    harita.style.width = '500px';

    var secenekler = {
      center: latlon, zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
    }

    var map = new google.maps.Map(harita, secenekler);
    var marker = new google.maps.Marker({ position: latlon, map: map, title: "Buradasınız!" });
  }

  function hataGoster(hata) {
    document.write(hata.message);
  }

  konumuGetir();
</script>

Dahası

Geolocation API getCurrentPosition metodunu coords özelliğinin accuracy, altitudeAccuracy, speed gibi daha detaylı bilgi veren değerleri vardır.

Geolocation API watchPosition, clearWatch gibi metotlara da sahiptir.

getCurrentPosition metodu yerine watchPosition metodunun kullanılması hareket halinde olan kullanıcıların konumlarının sürekli olarak güncellenmesini sağlar.

clearWatch metodu ise watchPosition metodunun sürekli güncellenmesini durdurur.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.