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<🎜><🎜>||||||||||
| coords.latitude | Latitud nombor perpuluhan | |||||||||
| coords.longitude | Nombor perpuluhan Longitud | |||||||||
| coords . ketepatan | Ketepatan kedudukan | < / tr>|||||||||
| coords.altitude | < 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.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>
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
