En son web geliştirme öğreticiler

HTML Coğrafi Konum


HTML Coğrafi Konum API bir kullanıcının konumunu bulmak için kullanılır.


Kullanıcı Konumunu bulun

HTML Coğrafi Konum API bir kullanıcının coğrafi konumunu elde etmek için kullanılır.

Bu gizlilik uzlaşma yana kullanıcı onayladığında sürece, pozisyon kullanılamaz.


Tarayıcı Desteği

Tablodaki rakamlar tam Geolocation destekleyen ilk tarayıcı sürümü belirtin.

API
Geolocation 5.0 9.0 3.5 5.0 16.0

Note: Coğrafi Konum gibi, GPS cihazları için çok daha doğrudur iPhone .


HTML Geolocation Kullanımı

getCurrentPosition() yöntemi, kullanıcının konumunu elde etmek için kullanılır.

Aşağıdaki örnekte, kullanıcının konumunun enlem ve boylam verir:

Ö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>
Kendin dene "

Örnek açıklanmıştır:

  • Coğrafi Konum desteklenip desteklenmediğini kontrol edin
  • Destekleniyorsa, çalıştırmak getCurrentPosition() metodu. Değilse, kullanıcıya bir mesaj görüntüleyebilir
  • Eğer getCurrentPosition() metodu başarılı olur, bu, bir koordinat parametresinde belirtilen işlevine nesne döner (showPosition)
  • showPosition() işlev Enlem ve Boylamı çıktılar

Yukarıdaki örnekte, bir hata işleme, bir çok temel Konum Belirleme komut dosyası.


Hataları ve ret Taşıma

Ikinci parametre getCurrentPosition() yöntemine hataları işlemek için kullanılır. O Kullanıcının yerini almak için başarısız olursa çalıştırmak için 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;
    }
}
Kendin dene "

Bir Harita Sonucu gösteriliyor

Bir harita sonucu görüntülemek için, Google Maps gibi harita hizmetine erişimi, gerekir.

Aşağıdaki örnekte, dönen enlem ve boylam Google Harita konumu göstermek için kullanılır (using a static image) :

Örnek

function showPosition(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("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Kendin dene "

Google Harita Senaryo
Bir işaretleyici, zum ve sürükleme seçenekleriyle interaktif Google Haritası nasıl gösterilir.


Konum özgü bilgiler

Bu sayfa bir harita üzerinde bir kullanıcının konumunu göstermek için nasıl gösterdi.

Coğrafi Konum ayrıca gibi yere özgü bilgiler için çok yararlıdır:

  • Yukarı güncel yerel bilgi
  • Kullanıcı yakın Noktalar-faiz gösteriliyor
  • Turn-by-turn navigasyon (GPS)

getCurrentPosition() Metodu - Dönüş Veri

getCurrentPosition() başarılı ise, yöntem, bir nesne döndürür. enlem, boylam ve doğruluk özellikleri her zaman iade edilir. Diğer özellikler varsa döndürülür:

özellik İade
coords.latitude ondalık sayı olarak enlem
coords.longitude ondalık sayı olarak boylam
coords.accuracy konumunun doğruluğu
coords.altitude ortalama deniz seviyesinden metre yükseklik
coords.altitudeAccuracy konumunun yükseklik doğruluğu
coords.heading derece olarak başlık North saat yönünde
coords.speed saniyedeki metre hız
timestamp yanıtın tarih / zaman

Coğrafi Konum nesne - Diğer ilginç Yöntemleri

watchPosition() - kullanıcı mevcut konumu ile döner ve kullanıcı hamle olarak güncellenen pozisyonunu geri dönmeye devam (like the GPS in a car) .

clearWatch() - durdurur watchPosition() metodu.

Aşağıdaki örnek gösterir watchPosition() metodu. Bunu test etmek için doğru bir GPS cihazı ihtiyaç (like iPhone ) :

Ö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>
Kendin dene "