HTML API Ders_1 Geolocation (Konum)

HTML API Geolocation (Coğrafik Konum)

  • Bir API uygulaması, bizim sitemiz ile büyük bir internet sitesinin veritabanları arasında bağlantı kuran bir uygulamadır.
  • HTML Geolocation API uygulaması, kullanıcılarımızın konumunu belirlemek için kullanılır.
  • Bu uygulama, kullanıcının özel hayatına müdahale sayılabileceğinden, kullanıcının izni olmadan çalışmaz.

Tarayıcı Desteği

Aşağıda, taraycıların hangi versiyonlarından sonra Geolocation özelliğini desteklediği görülmektedir:

API
Geolocation5.09.03.55.016.0

HTML Geolocation Kullanımı

Kullanıcının konumunu öğrenmek için getCurrentPosition() metodu kullanılır.

Aşağıda, kullanıcının enlem ve boylam değerlerini veren basit bir Geolocation uygulaması verilmiştir:

<script>
var x = document.getElementById("deneme");
function konumuBelirle() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(konumGoster, hataGoster);
    } else {
        x.innerHTML = "Geolocation özelliği bu tarayıcı tarafından desteklenmior.";
    }
}
function konumGoster(konum) {
    x.innerHTML = "Enlem: " + konum.coords.latitude + 
    "<br>Boylam: " + konum.coords.longitude; 
}
</script>

Yukarıdaki kodların anlamı şudur:
  • Önce tarayıcının geolocation özelliğini destekleyip desteklemediğini anlıyoruz.
  • Eğer destekliyorsa, getCurrentPosition() metodu çalışıyor. Eğer destlemiyorsa kullanıcıya bir mesaj (Geolocation özelliği bu tarayıcı tarafından desteklenmior.) gönderiyoruz.
  • getCurrentPosition() metodu sorunsuz çalışırsa, kullanıcının konum bilgilerini alır ve konumGoster parametresine yükler.
  • konumGoster() fonksiyonu ise enlem ve boylam değerlerini "deneme" adındaki html elemanının içeriğine aktarır.
Yukarıdaki örnek oldukça basit bir Geolocation uygulamasıdır ve hata denetimi yoktur.

Hata ve Ret Kontrolü

Bazen bir hata ile karşılaşabiliriz, bazen de kullanıcımız konumunu bildirmek istemeyebilir. İşte bu durumları kontrol etmek mümkündür.

getCurrentPosition() metodunun ikinci parametresi (hataGoster) de hataları kontrol etmek için kullanılır. Bu parametre ile kullanıcının konum bilgilerini almakta bir sorun olduysa bunu bildiren bir fonksiyon oluşturulabilir. 

Aşağıda bunun örneği verilmiştir:

function hataGoster(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "Kullanıcı konumunu bildirmek istemedi."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Konum bilgileri mevcut değil."
            break;
        case error.TIMEOUT:
            x.innerHTML = "Konum talebi zaman aşımına uğradı."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "Bilinmeyen bir hata oluştu."
            break;
    }
}

Yukarıdaki hata kodları:
  • PERMISSION_DENIED Kodu, kullanıcının konumunu bildirmek istemediğini anlatır.
  • POSITION_UNAVAILABLE Kodu, böyle bir konumun bulunmadığını anlatır.
  • TIMEOUT Kodu, zaman aşımını ifade eder.  

Sonuçları Bir Haritada Göstermek

Sonuçları bir haritada gösterebilmek için; enlem ve boylam değerlerini destekleyen bir harita uygulamasıyla bağlantı kurmanız gerekir. Google Maps bu iş için oldukça uygundur:

function konumGoster(konum) {
    var koordinatlar= konum.coords.latitude + "," + konum.coords.longitude;

     var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
    "+koordinatlar+"&zoom=14&size=400x300&sensor=false";

     document.getElementById("haritaYeri").innerHTML = "<img src='"+img_url+"'>";
}

Yukarıdaki kod, kullanıcının konumunu sabit bir fotograf olarak gösterecektir. Şimdi bu kodları topluca verelim:


<p id="demo">Konumunuzu görmek için tıklayınız.</p>

<button onclick="getLocation()">Dene</button>

<div id="harita"></div>



<script>

var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(konumGoster, hataGoster);
    } else {
        x.innerHTML = "Geolocation özelliği bu tarayıcı tarafından desteklenmior.";
    }
}

function konumGoster(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("harita").innerHTML = "<img src='"+img_url+"'>";
}

function hataGoster(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "Kullanıcı konumunu bildirmek istemedi."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Konum bilgileri mevcut değil."
            break;
        case error.TIMEOUT:
            x.innerHTML = "Konum talebi zaman aşımına uğradı."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "Bilinmeyen bir hata oluştu."
            break;
    }
}
</script>

Aşağıdaki kodlar da kullanıcı konumunu, interaktif bir harita ile birlikte verir:

<p id="deneme">Konumunuzu görmek için tıklayınız.</p>



<button onclick="getLocation()">Dene</button>



<div id="harita"></div>



<script src="http://maps.google.com/maps/api/js?sensor=false"></script>


<script>
var x = document.getElementById("deneme");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(konumGoster, hataGoster);
    } else { 
        x.innerHTML = "Geolocation özelliği bu tarayıcı tarafından desteklenmior.";
    }
}

function konumGoster(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('harita')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

    var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
    
    var map = new google.maps.Map(document.getElementById("harita"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"Buradasınız!"});
}

function hataGoster(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "Kullanıcı konumunu bildirmek istemedi."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Konum bilgileri mevcut değil."
            break;
        case error.TIMEOUT:
            x.innerHTML = "Konum talebi zaman aşımına uğradı."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "Bilinmeyen bir hata oluştu."
            break;
    }
}
</script>

Bu kodların tarayıcıdaki çıktısı şöyledir:

Konumunuzu görmek için tıklayınız.

Location-Specific Bilgiler

Bu ders, kullanıcının konumunun bir harita üzerinde nasıl gösterilebileceği üzerineydi. Geolocation, konum bilgisinin yanında, kullanıcıların konumuna özel bir takım başka bilgiler edinmemizi de sağlar. Örneğin:

  • Kullanıcının civarındaki ilgi çekici noktalar gösterilebilir
  • Konum bilgileri gücellenebilir
  • Navigasyon veya GPS yönlendirmesi yapılabilir

getCurrentPosition() Metodunun Döndürdüğü Veriler

getCurrentPosition() metodu, eğer sorunsuz işliyorsa; enlem, boylam ve isabetlilik değerlerinin yanında başka yapılar da döndürür. Aşağıda bu yapıların (property) bir tablosu verilmiştir:
Property (Yapı)Tanımı
coords.latitudeEnlem değeri
coords.longitudeBoylam değeri
coords.accuracyKonumun kesinliliği (hata payı)
coords.altitudeRakım (Deniz seviyesinden yükseklik)
coords.altitudeAccuracyRakımın kesinliği
coords.headingİlerlediğimiz yönün, kuzeye göre saat yönündeki açı değeri
coords.speedmetre/saniye olarak hız
timestampTepki süresi/zamanı

 Geolacation Objesinin Başka İlginç Metotları

watchPosition() : Arabadaki bir GPS cihazı gibi, kullanıcının haraketlerini takip ederek, değişen konum değerlerini döndürür.

clearWatch()metodu, watchPosition() metodunu durdurur.

 Aşağıdaki örnek, watchPosition() metodunu çalıştırır. Bu kodları cep telefonunuzda çalıştırarak, sonuçlarını GPS cihazınız ile test edebilirsiniz:

 <p>Koordinatlarınızı almak için butona tıklayınız</p>

 <button onclick="getLocation()">Dene</button>

 <p id="deneme"></p>

 <script>
var x = document.getElementById("deneme");

 function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation özelliği bu tarayıcı tarafından desteklenmiyor.";}
    }
    
function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}

 </script>

Bu kodların tarayıcıdaki çıktısı şöyledir:
Koordinatlarınızı almak için butona tıklayınız


Gönderen
Etiketler: , , , , , , , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)