Web Coğrafi Konum API'sı
Kullanıcının Konumunu Bulun
HTML Geolocation API, bir kullanıcının coğrafi konumunu almak için kullanılır.
Bu, gizliliği tehlikeye atabileceğinden, kullanıcı onaylamadıkça pozisyon kullanılamaz.
Not: Konum belirleme, akıllı telefon gibi GPS'li cihazlar için en doğrudur.
Geolocation API, tüm tarayıcılarda desteklenir:
| Yes | Yes | Yes | Yes | Yes |
Not: Chrome 50'den itibaren, Coğrafi Konum API'si yalnızca HTTPS gibi güvenli bağlamlarda çalışı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.
Coğrafi Konum API'sini kullanma
Yöntem getCurrentPosition(), 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:
Örnek
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Örnek açıkladı:
- Coğrafi Konum'un 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, parametrede (showPosition) belirtilen işleve bir koordinat nesnesi döndürür
- showPosition() işlevi Enlem ve Boylamı verir
Yukarıdaki örnek, hata işleme içermeyen çok basit bir Geolocation komut dosyasıdır.
Hataları ve Redleri İşleme
Yöntemin ikinci parametresi getCurrentPosition()hataları işlemek için kullanılır. Kullanıcının konumunu alamazsa çalıştırılacak bir işlevi belirtir:
Örnek
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Sonucu Haritada Görüntüleme
Sonucu bir haritada görüntülemek için Google Haritalar gibi bir harita hizmetine erişmeniz gerekir.
Aşağıdaki örnekte, döndürülen enlem ve boylam, konumu bir Google Haritasında göstermek için kullanılır (statik bir resim kullanarak):
Örnek
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Lokasyona Özgü Bilgiler
Bu sayfa, bir kullanıcının konumunun bir harita üzerinde nasıl gösterileceğini göstermiştir.
Coğrafi konum, aşağıdakiler gibi konuma özgü bilgiler için de çok kullanışlıdır:
- Güncel yerel bilgiler
- Kullanıcının yakınında İlgi Çekici Noktaları gösterme
- Adım adım navigasyon (GPS)
getCurrentPosition() Yöntemi - Verileri Döndür
Yöntem getCurrentPosition(), 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:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
Coğrafi Konum Nesnesi - Diğer ilginç 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 (arabadaki GPS gibi) güncellenen konumu döndürmeye devam eder.clearWatch()watchPosition()- Yöntemi durdurur .
Aşağıdaki örnek watchPosition()yöntemi göstermektedir. Bunu test etmek için doğru bir GPS cihazına ihtiyacınız var (akıllı telefon gibi):
Örnek
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>