HTML5 Geolocation API
HTML Geolocation (Coğrafi Konum) API, bir kullanıcının konumunu bulmak için kullanılır.
Coğrafi Konumunu Bulmak
Bu API ile kullanıcının bulunduğu konumu alabiliyoruz. Ancak gizlilikten dolayı, kullanıcı buna izin vermediği sürece alınamaz.
https
olması gerekiyor, aksi taktirde çalışmayacaktır.
Geolocation API Kullanım
İlk olarak navigator.geolocation
ile tarayıcının desteklenip desteklenmediği kontrol edilir.
if (navigator.geolocation){
// tarayıcı destekliyor
} else {
// tarayıcı desteklemiyor, hata mesajı vs. gösterebilirsiniz
}
Daha sonra kullanıcının konumunu almak için getCurrentPosition()
metodunu kullanacağız. Bu metod 2 parametre alıyoruz. İlk parametre eğer kullanıcı izin verirse çalışacak callback fonksiyonu, ikinci parametre eğer bir hata olursa çalışacak olan callback fonksiyonu.
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
// tarayıcı desteklemiyor, hata mesajı vs. gösterebilirsiniz
}
// başarılı ise bu fonksiyon çalışacak
function showPosition(position){
console.log(position);
}
// bir hata olursa bu fonksiyon çalışacak
function showError(error){
console.log(error);
}
Şimdi showPosition()
metodunda bize gelen değerler şu şekildedir;
Özellik | Açıklaması |
---|---|
coords.latitude | Enlem (Her zaman döner) |
coords.longitude | Boylam (Her zaman döner) |
coords.accuracy | Konumun doğruluğu (Her zaman döner) |
coords.altitude | Ortalama deniz seviyesinden metre cinsinden rakım (varsa) |
coords.altitudeAccuracy | Konumun rakım doğruluğu (varsa) |
coords.speed | Saniyedeki metre cinsinden hız (varsa) |
coords.timestamp | Cevabın tarihi / saati (varsa) |
Şimdi tüm bilgileri toparlayarak çalışan bir örnek yapalım.
<button id="button">Konumumu Bul</button>
<div id="result"></div>
<script>
// butonu seçelim
let button = document.getElementById('button');
// butona tıklandığında bunu yakalayalım
button.onclick = function(){
// tarayıcının destekleyip desteklemediğine bakalım
if (navigator.geolocation) {
// Eğer kullanıcı izin vermiş ise showPosition fonksiyonu çalışacak
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation tarayıcınızda desteklenmiyor.";
}
};
// position ile gönderilen datayı alıyoruz
function showPosition(position){
// sonuçları göstereceğimiz etiketi seçtik
let result = document.getElementById('result');
// sonuçları etiketimizin içinde gösteriyoruz
result.innerHTML = `Enlem: ${position.coords.latitude} <br>
Boylam: ${position.coords.longitude}`;
}
</script>
Editörde GörüntüleHataları Yönetmek
getCurrentPosition()
metodu 2. parametresi hata alındığında çalışır. Kullanıcı tarafından izin verilmediğinde ya da oluşabilecek diğer hataları bu fonksiyondan yönetmemiz gerekir. Dönebilecek değerler ise şunlardır;
Özellik | Açıklaması |
---|---|
PERMISSION_DENIED | Kullanıcı izin vermeyi reddetti. |
POSITION_UNAVAILABLE | Lokasyon bilgisi bulunamadı. |
TIMEOUT | İstek zaman aşımına uğradı. |
UNKNOWN_ERROR | Bilinmeyen bir hata oluştu. |
Kodlarla bir örnek vermek gerekirse;
navigator.geolocation.getCurrentPosition(showPosition, showError);
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.log("Kullanıcı izin vermeyi reddetti.");
break;
case error.POSITION_UNAVAILABLE:
console.log("Lokasyon bilgisi bulunamadı.");
break;
case error.TIMEOUT:
console.log("İstek zaman aşımına uğradı.");
break;
case error.UNKNOWN_ERROR:
console.log("Bilinmeyen bir hata oluştu.");
break;
}
}
function showPosition(position){
console.log(position);
}
Konumu Haritada Göstermek
Google'ın maps hizmetini kullanarak kullanıcının enlem ve boylamını harita üzerinde gösterebiliriz. İhtiyacımız olan https://maps.googleapis.com/maps/api/staticmap?center=[ENLEM],[BOYLAM]&zoom=14&size=400x300&sensor=false&key=[API_KEY]
bu adresi <img>
etiketinde göstermek.
Burada [ENLEM] ve [BOYLAM] zaten Geolocation API tarafından sağlanan değerler, tek ihtiyacımız olan Google'dan bir API_KEY almamız. Onuda buradaki adımları izleyerek alabilirsiniz.
Aşağıdaki örnekte ek olarak lokasyonun işaretlenmesi yapılmıştır, bu özellikler tamamen google maps'in vermiş olduğu özellikler, eğer ilginizi çekiyorsa google maps'in API sayfasına gözatabilirsiniz :)
<button id="button">Konumumu Bul</button>
<div id="result"></div>
<script>
let button = document.getElementById('button');
button.onclick = function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation tarayıcınızda desteklenmiyor.";
}
};
function showPosition(position) {
let result = document.getElementById('result');
let location = position.coords.latitude + ',' + position.coords.longitude;
result.innerHTML = `<img src="https://maps.googleapis.com/maps/api/staticmap?center=${location}&zoom=15&size=350x200&language=tr&maptype=roadmap&markers=color:red%7Clabel:BX%7C${location}&key=AIzaSyD1-p2LRZozs7Y-5-pYvh8AMlVSHgeFa9E">`;
}
</script>
Editörde GörüntülewatchPosition() ve clearWatch() Metodları
Cihazın konumu her değiştiğinde anlık olarak konum takibi yapabilmek için watchPosition()
metodu kullanılır. Konum paylaşımını sonlandırmak için ise clearWatch()
metodu kullanılır. Çalışan bir örneği ise şöyledir;
<button id="start">Konumu Paylaş</button>
<button id="stop">Paylaşımı Durdur</button>
<div id="result"></div>
<script>
let id;
let start = document.getElementById('start');
let stop = document.getElementById('stop');
let result = document.getElementById('result');
start.onclick = function () {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
result.innerHTML = "Geolocation tarayıcınızda desteklenmiyor.";
}
};
stop.onclick = function () {
navigator.geolocation.clearWatch(id);
result.innerHTML = "Konum paylaşımı durduruldu.";
};
function showPosition(position) {
let location = position.coords.latitude + ',' + position.coords.longitude;
result.innerHTML = `<img src="https://maps.googleapis.com/maps/api/staticmap?center=${location}&zoom=15&size=350x200&language=tr&maptype=roadmap&markers=color:red%7Clabel:BX%7C${location}&key=AIzaSyD1-p2LRZozs7Y-5-pYvh8AMlVSHgeFa9E">`;
}
</script>
Editörde Görüntüle