Geolokasi HTML5

Geolokasi HTML5

Geolokasi HTML5 digunakan untuk mencari lokasi pengguna.

Cari lokasi pengguna

API Geolokasi HTML5 digunakan untuk mendapatkan lokasi geografi pengguna.

Memandangkan ciri ini mungkin melanggar privasi pengguna, maklumat lokasi pengguna tidak tersedia melainkan pengguna bersetuju.

Sokongan penyemak imbas

Internet Explorer 9+, Firefox, Chrome, Safari dan Opera menyokong Geolokasi.

Nota: Geolokasi hanya tersedia untuk peranti dengan GPS , seperti iPhone, geolokasi adalah lebih tepat.

HTML5 - Menggunakan geolokasi

Sila gunakan kaedah getCurrentPosition() untuk mendapatkan lokasi pengguna.

Contoh berikut ialah contoh geolokasi mudah yang mengembalikan longitud dan latitud lokasi pengguna:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲取）：</p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
    }
    function showPosition(position)
    {
        x.innerHTML="緯度: " + position.coords.latitude +
                "<br>經(jīng)度: " + position.coords.longitude;
    }
</script>
</body>
</html>

Jalankan atur cara untuk mencubanya

Contoh analisis :

Kesan sama ada geolokasi disokong

Jika disokong, jalankan kaedah getCurrentPosition(). Jika tidak disokong, mesej dipaparkan kepada pengguna.

Jika getCurrentPosition() berjalan dengan jayanya, objek koordinat dikembalikan kepada fungsi yang dinyatakan dalam parameter showPosition

Fungsi showPosition() memperoleh dan memaparkan longitud dan latitud

Contoh di atas ialah skrip geolokasi yang sangat Asas tanpa pengendalian ralat.

Mengendalikan ralat dan penolakan

Parameter kedua kaedah getCurrentPosition() digunakan untuk mengendalikan ralat. Ia menentukan fungsi yang akan dijalankan apabila mendapatkan lokasi pengguna gagal:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="Geolocation is not supported by this browser.";}
    }
    function showPosition(position)
    {
        x.innerHTML="緯度: " + position.coords.latitude +
                "<br>經(jīng)度: " + position.coords.longitude;
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用戶(hù)拒絕對(duì)獲取地理位置的請(qǐng)求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請(qǐng)求用戶(hù)地理位置超時(shí)。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯(cuò)誤。"
                break;
        }
    }
</script>
</body>
</html>

Jalankan program untuk mencubanya

Kod ralat:

Kebenaran ditolak - Pengguna tidak membenarkan geolokasi

Kedudukan tidak tersedia - Tidak dapat mendapatkan lokasi semasa

Tamat masa - Tamat masa operasi

Tunjukkan keputusan dalam peta

Untuk memaparkan hasil pada peta, anda perlu mengakses perkhidmatan peta yang boleh menggunakan latitud dan longitud, seperti Peta Google atau Peta Baidu:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<div id="mapholder"></div>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
    }
    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+"'>";
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用戶(hù)拒絕對(duì)獲取地理位置的請(qǐng)求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請(qǐng)求用戶(hù)地理位置超時(shí)。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯(cuò)誤。"
                break;
        }
    }
</script>
</body>
</html>

Jalankan atur cara dan cuba

Dalam contoh di atas, kami menggunakan data latitud dan longitud yang dikembalikan untuk memaparkan lokasi dalam Peta Google (menggunakan imej statik).

Contoh

Cara menggunakan skrip Peta Google untuk memaparkan peta interaktif dengan pilihan penanda, zum dan seret.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
    }
    function showPosition(position)
    {
        lat=position.coords.latitude;
        lon=position.coords.longitude;
        latlon=new google.maps.LatLng(lat, lon)
        mapholder=document.getElementById('mapholder')
        mapholder.style.height='250px';
        mapholder.style.width='500px';
        var myOptions={
            center:latlon,zoom:14,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            mapTypeControl:false,
            navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
        };
        var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
        var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用戶(hù)拒絕對(duì)獲取地理位置的請(qǐng)求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="請(qǐng)求用戶(hù)地理位置超時(shí)。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知錯(cuò)誤。"
                break;
        }
    }
</script>
</body>
</html>

Jalankan program dan cuba

Diberikan Maklumat lokasi

Halaman ini menunjukkan cara memaparkan lokasi pengguna pada peta. Walau bagaimanapun, geolokasi juga berguna untuk maklumat tentang lokasi tertentu.

Contoh:

Kemas kini maklumat setempat
Paparkan tempat menarik di sekeliling pengguna
Sistem Navigasi Kereta Interaktif (GPS)

kaedah getCurrentPosition() - kembalikan data

Jika berjaya, kaedah getCurrentPosition() mengembalikan objek. Sifat latitud, longitud dan ketepatan sentiasa dikembalikan. Jika tersedia, sifat berikut yang lain dikembalikan.

< td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"> ?Penerangan< / tr> < td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">Altitud, dalam meter di atas paras laut< /tr >

屬性	描述
coords.latitude	十進(jìn)制數(shù)的緯度
coords.longitude	十進(jìn)制數(shù)的經(jīng)度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米計(jì)

Atribut

coords.latitude

Latitud nombor perpuluhan

coords.longitude

Nombor perpuluhan Longitud

coords . ketepatan

Ketepatan kedudukan

coords.altitude

coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開(kāi)始以度計(jì)
coords.speed	速度，以米/每秒計(jì)
timestamp	響應(yīng)的日期/時(shí)間

Objek geolokasi

watchPosition() - Mengembalikan kedudukan semasa pengguna dan terus mengembalikan kedudukan yang dikemas kini apabila pengguna bergerak ( iaitu seperti GPS dalam kereta).

clearWatch() - Menghentikan kaedah watchPosition()

Contoh berikut menunjukkan kaedah watchPosition(). Anda memerlukan peranti GPS yang tepat untuk menguji contoh ini (seperti iPhone):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="緯度: " + position.coords.latitude + 
  "<br>經(jīng)度: " + position.coords.longitude;
  }
</script>
</body>
</html>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p> <button onclick="getLocation()">點(diǎn)我</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="該瀏覽器不支持獲取地理位置。";} } function showPosition(position) { x.innerHTML="緯度: " + position.coords.latitude + "<br>經(jīng)度: " + position.coords.longitude; } </script> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik