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中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</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>经度: " + 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中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</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>经度: " + position.coords.longitude;
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                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中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</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="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                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中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</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="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                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	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计

Atribut<🎜><🎜>

coords.latitude

Latitud nombor perpuluhan

coords.longitude

Nombor perpuluhan Longitud

coords . ketepatan

Ketepatan kedudukan

coords.altitude

coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

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中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</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>经度: " + position.coords.longitude;
  }
</script>
</body>
</html>

bahagian seterusnya

fail baharu

<!DOCTYPE html>
<html>
<head> 
 <meta charset="UTF-8">
 <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</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>经度: " + position.coords.longitude;
 }
</script>
</body>
</html>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh