Geolokasi HTML5
Geolokasi HTML5 digunakan untuk mencari lokasi pengguna.
Cari lokasi pengguna
HTML5 Geolocation API 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 (geolokasi) 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:
Contoh
<!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 contoh»
Klik butang "Jalankan contoh" untuk melihat tika dalam talian
Analisis kejadian:
Semak sama ada geolokasi disokong
Jika disokong, jalankan kaedah getCurrentPosition(). Jika tidak disokong, mesej dipaparkan kepada pengguna.
Jika getCurrentPosition() berjalan dengan jayanya, kembalikan objek koordinat kepada fungsi yang dinyatakan dalam parameter showPosition
showPosition() fungsi 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:
Instance
<!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>Run Instance»
Klik Butang "Jalankan" Instance" untuk melihat kejadian dalam talian
Kod ralat:
Kebenaran ditolak - Pengguna tidak dibenarkan membuat geolokasi
Kedudukan tidak tersedia - Tidak dapat memperoleh kedudukan semasa
Tamat masa - Tamat masa operasi
Paparkan keputusan dalam peta
sebagai Untuk memaparkan hasil pada peta, anda perlu mengakses perkhidmatan peta yang boleh menggunakan latitud dan longitud, seperti Peta Google atau Peta Baidu:
Instance
<!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 Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Dalam contoh di atas, kami menggunakan data latitud dan longitud yang dikembalikan untuk memaparkan lokasi dalam Peta Google (menggunakan imej statik).
Skrip Peta Google
Pautan di atas menunjukkan kepada anda cara menggunakan skrip untuk memaparkan peta interaktif dengan pilihan penanda, zum dan seret.
Maklumat untuk lokasi tertentu
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.
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
Objek geolokasi - kaedah menarik lain
watchPosition() - mengembalikan kedudukan semasa pengguna dan terus mengembalikan kedudukan yang dikemas kini apabila pengguna bergerak (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):
Instance
<!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>Run Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
