Rumah >hujung hadapan web >html tutorial >Geolokasi HTML
Geolokasi HTML
- 王林asal
- 2024-09-04 16:51:16562semak imbas
Sehingga kini, kami telah melihat banyak ciri direka bentuk menggunakan HTML. Salah satu ciri terkini dan lanjutan yang disertakan dalam HTML ialah geolokasi. Geolokasi HTML paling berguna untuk mengesan lokasi pengguna pada peta. Jadi ciri ini direka bentuk dalam HTML untuk mengenal pasti kedudukan sebenar pengguna pada peta. Kedudukan pengguna ini boleh dikenal pasti dengan menggunakan atribut yang dipanggil latitud dan longitud kedudukan pengguna tertentu. Ini boleh mendapatkan maklumat hanya apabila pengguna membenarkannya mengakses lokasi. Ciri HTML ini kebanyakannya digunakan untuk tujuan perniagaan tempatan, untuk mencari restoran atau memilih lokasi pada peta.
Sintaks
Berikut ialah sintaks untuk geolokasi HTML adalah seperti berikut: Seseorang boleh menggunakan API lokasi, yang akan menggunakan objek navigator global, seperti yang ditunjukkan di bawah:
var locat = navigator.geolocation;
Ke dalam navigator sintaks di atas. Geolokasi bertanggungjawab untuk pelayar pengguna untuk mendapatkan akses kepada maklumat lokasi mereka; satu akses ditakrifkan. Penyemak imbas boleh menyediakan fungsi terbaik yang terdapat di sana pada peranti, jadi seseorang boleh mengakses data ini dengan mudah.
Data ini boleh diakses dengan cekap dengan menggunakan cara yang berbeza seperti getCurrentPosition untuk mengetahui kedudukan semasa pengguna atau peranti, watchPosition, yang membantu apabila kedudukan peranti semakin berubah dan satu lagi cara seperti clearWatch, yang membantu mengosongkan semua panggilan dalam fungsi geolokasi.
Fungsi ini berfungsi pada beberapa antara muka seperti berikut:
- Geolokasi: Ia merupakan salah satu API paling penting dalam kelas utama, yang merangkumi beberapa kaedah yang membantu mendapatkan lokasi semasa pengguna, melihat perubahan dalam kedudukan mereka, dsb.
- GeolocationPosition: Ini digunakan untuk menentukan kedudukan pengguna. Apabila panggilan kejayaan dikenal pasti dalam salah satu geolokasi, maka ia akan menyelaraskan dengan contoh objeknya.
- Koordinat geolokasi: Ini membantu mengenal pasti koordinat untuk kedudukan pengguna.
- GeolocationPositionErrror: Antara muka ini dipanggil untuk panggilan yang tidak berjaya dikembalikan ke kaedah yang disertakan dalam geolokasi.
- Geolokasi: Ini berguna apabila tika objek geolokasi dipanggil dalam geolokasi. Jadi adalah mungkin untuk mengakses semua fungsi lain dari sini.
Kaedah geolokasi+63
Terdapat 3 kaedah yang digunakan dalam geolokasi HTML untuk menentukan kedudukan dengan antara muka geolokasi; itu adalah seperti berikut:
- getCurrentPosition(): Kaedah asas dalam geolokasi HTML ini membantu untuk mengesan lokasi geografi semasa sama ada peranti atau pengguna dan data pemulangannya pada peta. Kaedah ini berfungsi pada parameter yang berbeza seperti kejayaan, ralat, pilihan.
- watchPosition(): Setiap kali pengguna ingin menyemak kedudukan selepas lokasi peranti ditukar, ini dipanggil dalam pengekodan untuk menyemak kedudukan peranti yang diubah. Kaedah ini menggunakan fungsi panggilan balik ralat seperti Ralat rawak tidak diketahui. Pengguna tidak membenarkan berkongsi lokasi jika maklumat lokasi yang diberikan tidak tersedia dan lokasi yang diminta telah tamat masa.
- clearWatch(): seseorang mungkin boleh membatalkan panggilan watchPosition() sebelumnya serta ia akan membatalkan panggilan watchPosition yang sedang berjalan dengan menggunakan kaedah geolokasi HTML ini
Contoh Geolokasi HTML
Berikut ialah Contoh Geolokasi HTML
Contoh #1
Dalam contoh pertama, kami akan melihat sama ada penyemak imbas kami akan menyokong atau tidak untuk ciri geolokasi ini; inilah kod untuknya seperti yang dinyatakan di bawah:
Kod HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
</head>
<body>
<h4>HTML Geolocation</h4>
<button onclick="getlocation()">Click Here</button>
<br>
<br>
<br>
<p>As we all know, geolocation is the feature used for positioning the exact location of the user or device. But the first step we have to check whether our browser is going to support this geolocation feature or not. </p>
<h4> This Example illustrates whether our browser is going to support for geolocation or not.</h4>
<div id="geolocation1"></div>
<script>
var x= document.getElementById("geolocation1");
function getlocation() {
if(navigator.geolocation){
alert("My browser is going to support Geolocation feature")
}
else
{
alert("Oops! My browser is not going to support Geolocation feature")
}
}
</script>
</body>
</html>
Output:
Contoh #2
Dalam contoh ini, kami akan menunjukkan lokasi tepat dengan ciri geolokasi HTML, jadi ia akan menunjukkan kedudukan tepat pada peta dengan nilai atribut untuk latitud dan longitud adalah seperti berikut:
Kod HTML:
<!DOCTYPE html>
<html>
<body>
<h4>HTML Geolocation Latitude and Longitude Value</h4>
<p>Example showing Geolocation , It will give values for the latitude and longitude after clicking below button</p>
<button onclick="getLocation()">Click Here</button>
<p id="geolocation"></p>
<script>
var x = document.getElementById("geolocation");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showgeolocPosition);
} else {
x.innerHTML = "This code is not supported in geolocation for your browser";
}
}
function showgeolocPosition(position) {
x.innerHTML = "Latitude Attribute Value: " + position.coords.latitude +
"<br>Longitude Attribute Value: " + position.coords.longitude;
}
</script>
</body>
</html>
Output:
Selepas mengklik butang, output akan seperti yang ditunjukkan di bawah
Contoh #3
Dalam contoh ini, kami akan menunjukkan lokasi tepat dengan ciri geolokasi HTML, jadi ia akan menunjukkan kedudukan tepat pada peta dengan nilai atribut untuk latitud dan longitud adalah seperti berikut:
Kod HTML:
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<style>
#mapdemo{
width: 500px;
height: 500px;
margin-left: 200px;
}
</style>
<body>
<h2>Find Your Location on Google Map</h2>
<p>In this Example we are going to see exact location on Google map, where actually we are.</p>
<button onclick="getlocation();"> Show my position on Map </button>
<div id="mapdemo">
</div>
<script src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function getlocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPos, showErr);
}
else{
alert("Sorry! your Browser does not support Geolocation API")
}
}
// Current Poistion on Google Map
function showPos(position){
latt = position.coords.latitude;
long = position.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var myOptions = {
center: lattlong,
zoom: 15,
mapTypeControl: true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}
}
var maps = new google.maps.Map(document.getElementById("mapdemo"), myOptions);
var markers =
new google.maps.Marker({position:lattlong, map:maps, title:"Your position on map!"});
}
function showErr(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User or Device not allow to accept your request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer or Device exact location information is currently unavailable.");
break;
case error.TIMEOUT:
alert("Requested request is getting time out .");
break;
case error.UNKNOWN_ERROR:
alert("Something unknown error is accrued.");
break;
}
} </script>
</body>
</html>
Output:
Conclusion
D'après toutes les informations ci-dessus, nous avons appris que la géolocalisation HTML est une fonctionnalité utilisée pour identifier l'emplacement d'un appareil ou d'un utilisateur sur une carte.
Il utilise les attributs de latitude et de longitude pour identifier la position exacte de l'utilisateur.
Cette fonctionnalité fonctionne sur différentes méthodes telles que getCurrentPosition, watchPosition et clearWatch.
Atas ialah kandungan terperinci Geolokasi HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!