HTML Coğrafi Konum API'si
HTML Geolocation API, bir kullanıcının konumunu bulmak için kullanılır.
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ı telefonlar gibi GPS'li cihazlar için en doğrudur.
Tarayıcı Desteği
Tablodaki sayılar, Geolocation'ı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
API | |||||
---|---|---|---|---|---|
Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
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.
HTML Coğrafi Konumunu 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>
var 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;
}
}
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ındaki ilgi ç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>
var 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>