HTML5 İle Geolocation (coğrafik yer) Belirleme
Hayatımıza Html ile giren Geolocation API tarayıcının kendi içindeki komutları kullanarak kullanıcının konumunu almak için kullanılan bir özelliktir.Ancak bu konum bilgisi kullanıcının güvenliğini tehlikeye sokabileceğinden mutlaka onay gerektiren bir işlemdir. Kullanıcı onay vermezse konumunu öğrenemeyiz.Konum bilgisinin başlıca kaynakları IP Adresi, Wi-Fi, RFID, GSM/CDMA hücre kimliği ve GPS bilgisidir.
Ancak bu API mutlaka doğru konum sonucu elde edileceğini garanti etmez. GPS özellikli cihazlarda konum bilgisi çok daha doğru biçimde alınmaktadır. HTML5 Geolocation destekleyen tarayıcılarda konum bilgisi wi-fi için erişim noktalarına ve kullanıcıların ip adreslerinin kombinasyonuna dayanarak belirlenmektedir. Yani yerleri belli olan kablosuz ağ merkezlerinin yakınında bulunuyorsanız yeriniz daha doğru bir şekilde belirlenecektir.
Geolocation API tüm modern tarayıcılar ve IE9 tarafından desteklenmektedir. Özellikle mobil alanda konum bilgisi alınabilmesi mobil uygulamalarda çok yararlı olmaktadır. Örneğin kullanıcın konumunu belirleyip ona bir firmanın en yakın şubesini ve nasıl gitmesi gerektiğini gösterebilirsiniz. Geolocation API Android (2.0+) ve IOS mobil işletim tarafından da desteklemektedir. Konum bilgisi tek seferde veya sürekli güncellenerek alınır. Bu da konum bilgisinin doğruluk oranının artması ve güncel olmasını sağlar. Örnek olarak telefonuzda ki haritalar uygulaması ile anlık konumumuzu beliryebilirsiniz. Yer değiştirirseniz telefondaki imlecin de yer değiştirdiğini görürsünüz.
Basit bir uygulama yapalım:
Bu uygulama için jquery kullanacağız.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 ile Yer Belirleme</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
konumbul();
});
</script>
</head>
<body>
</body>
</html>
Daha sonra konumu bulacak olan javascript fonksiyonunu yazalım.
function konumbul() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(yer_belirle, hata);
}
else{
$("body p strong").html("Cihaz/Tarayıcı konum belirleme özelliği desteklemiyor.");
}
}
Ayrıca enlem ve boylam sonuçlarını bulacak yer_belirle ve hatalar içinde hata fonksiyonlarını yazmanız gerekmektedir.
function yer_belirle(pozisyon) {
var lat = pozisyon.coords.latitude;
var lng = pozisyon.coords.longitude;
$("body").append($("<p></p>")).html("Konum Bilgisi : Enlem: " + lat + ", Boylam: " + lng);
}
navigator.geolocation.getCurrentPosition() fonksiyonu cihazdan alacağı IP Adresi, Wi-Fi, RFID, GSM/CDMA hücre kimliği ve GPS bilgisi gibi bilgileri kullanarak kullanıcının pozisyonunu bulur ve bunları enlem ve boylam olarak geri döndürecek olan yer_belirle fonksiyonuna gönderir.
Başarısız olma durumunda ise bir hata kodu döndürecektir. Bu hata koduna göre hata fonksiyonu ise gelen hata koduna göre gerekli mesajı döndürür.
Genel hatalar:
PERMISSION_DENIED = Kullanıcı onay vermedi.
POSITION_UNAVAILABLE = Bir sebebten ötürü konum hesaplanamadı.
TIMEOUT= Zaman aşımı.
function hata(error) {
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("Konum bilgisi paylaşılmadığı için işlem yapılamadı.");
break;
case error.POSITION_UNAVAILABLE:
alert("Mevcut konumunuz tespit edilemedi");
break;
case error.TIMEOUT:
alert("Konum tespiti sırasında zaman aşımı meydana geldi");
break;
default:
alert("Bilinmeyen Hata");
break;
}
}
Sayfayı çalıştırdığınız zaman tarayıcınızda "...sayfası konumuzu bilmek istiyor" şeklinde uyarı alacaksınız.
Eğer onay verirseniz enlem ve boylam tarayıcınızda görünecektir.
Bu enlem ve boylam bilgisi eğer sayfayı görüntületen cihazda GPS özelliği varsa çok daha doğru sonuç verecektir.
Öteki türlü yaklaşık bir sonuç gösterir. Örnek çalışmayı
buradan görebilirsiniz.
Elde edilen konum bilgisi ile istenirse farklı uygulamalar yapılabilinir. Örneğin Google Maps API kullanarak harita üzerinde gösterebilirsiniz.
Bunun için
http://code.google.com/apis/maps/signup.html adresininden bir API anahtarı almamız gerekli.
Sonra sayfamızdaki yer_belirle fonksiyonunu şu şekilde düzenliyoruz:
function yer_belirle(pozisyon) {
var lat = pozisyon.coords.latitude;
var lng = pozisyon.coords.longitude;
var API_KEY = "";
var konum = "https://www.google.com/maps/embed/v1/place?q=" + lat + "," + lng + "&key=" + API_KEY;
$("body").append($("<p></p>")).html("<iframe id='Map' src='"+ konum +"' style='width:100%;height:600px;border:0px;'> </iframe>");
}
API_KEY = ""; daki tırnaklar arasına aldğınız API anahtarını yazmanız gerekiyor.
Sayfayı çalıştırdığımız zaman mevcut konum artık harita üzerinde gözükecektir.
Örnek çalışmayı
buradan görebilirsiniz.
Ancak geçerli bir API anahtarı olmadığı sürece çalışmayacaktr.
Düzenle Kullanıcı Tarafından 14 Eylül 2015 Pazartesi 14:35:01(UTC)
| Sebep: Sebep Bildirilmesi
