Rumah >hujung hadapan web >html tutorial >Bagaimana untuk mencari kedudukan pengguna dalam HTML?
Bagaimana untuk mencari kedudukan pengguna dalam HTML?
- 王林ke hadapan
- 2023-08-20 21:45:352306semak imbas
Kadang-kadang tugasnya adalah untuk mencari lokasi semasa pengguna dan kemudian memaparkan koordinat lokasi pada halaman web atau memaparkan lokasi pada peta. Menggunakan HTML dan kod javascript, artikel ini menunjukkan proses mendapatkan lokasi semasa pengguna dalam halaman HTML. Ditunjukkan dengan menggunakan dua contoh yang berbeza. Dalam contoh pertama, anda boleh mendapatkan lokasi semasa pengguna dan kemudian memaparkan koordinat lokasi pada halaman HTML. Dalam contoh kedua, perpustakaan peta Risalah sumber terbuka digunakan untuk mendapatkan dan memaparkan lokasi semasa pengguna pada peta.
Contoh 1: Cari lokasi semasa pengguna dan paparkan koordinat lokasi pada halaman html.
Penjelasan Kod dan Langkah Reka Bentuk −
Langkah 1 − Buat fail HTML dan mula menulis kod.
Langkah 2 - Buat label
dan tetapkannya untuk memaparkan koordinat lokasi.
Langkah 3 - Buat butang dan panggil fungsi getYourLoc() apabila butang itu diklik.
Langkah 4 - Tulis kod dalam teg
Langkah 5 − Tulis kod javascript dalam getYourLoc() untuk mencari lokasi semasa menggunakan navigator.geolocation.getCurrentPosition() dan kemudian hubungi showMyPos(pos).
Langkah 6 - Tambahkan lokasi pada teg
yang dibuat sebelum ini menggunakan showMyPos(pos). Semak keputusan.
Fail penting digunakan − locationfile.html
Terjemahan bahasa Cina bagiCode For parentFolderFile.html:
ialah:Kod parentFolderFile.html:
<!DOCTYPE html>
<html>
<body>
<p>Show My Location Coordinates</p>
<button onclick="getYourLoc()">Get the location coordinates</button>
<p id="showloc"></p>
<script>
var x = document.getElementById("showloc");
function getYourLoc() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMyPos);
} else {
x.innerHTML = "No support for this in the browser.";
}
}
function showMyPos(pos) {
x.innerHTML = "My Latitude is : " + pos.coords.latitude +
"<br>My Longitude is : " + pos.coords.longitude;
}
</script>
</body>
</html>
Melihat Hasilnya
Untuk melihat keputusan, buka fail loactionfile.html dalam penyemak imbas anda. Sekarang klik pada butang untuk mencari lokasi semasa pengguna. Koordinat akan dipaparkan pada halaman html.
Contoh 2: Cari lokasi semasa pengguna dan paparkan koordinat lokasi pada peta.
Penjelasan Kod dan Langkah Reka Bentuk −
Langkah 1 − Buat fail HTML dan mula menulis kod.
Langkah 2 - Buat label
dan tetapkannya untuk memaparkan koordinat lokasi.
Langkah 3 - Buat butang dan panggil fungsi getYourLoc() apabila butang itu diklik.
Langkah 4 − Di dalam teg
Langkah 5 − Tulis kod javascript dalam getYourLoc() untuk mencari lokasi semasa menggunakan navigator.geolocation.getCurrentPosition() dan kemudian panggil kedua-dua fungsi showMyPos(pos) dan showmap(pos).
Langkah 6 - Apabila memaparkan peta dalam fungsi showmap(pos), masukkan perpustakaan risalah, gunakan peta asas, tetapkan penanda dan lulus koordinat lokasi semasa untuk menandakan lokasi peta.
Langkah 7 - Gunakan showMyPos(pos) untuk menambah lokasi pada teg
yang dibuat sebelum ini. Juga memaparkan peta. Semak keputusan.
Fail penting digunakan − locationfile11.html
Kod Untuk locationfile11.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<p>Show My Location Coordinates</p>
<button onclick="getYourLoc()">Get the location coordinates</button>
<p id="showloc"></p>
<div id="map"></div>
// the leaflet library for making maps
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script>
var x = document.getElementById("showloc");
// get the current location of the user
function getYourLoc() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMyPos);
} else {
x.innerHTML = "No support for this in the browser.";
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showmap);
} else {
x.innerHTML = "No map here.";
}
}
function showMyPos(pos) {
var lat=pos.coords.latitude;
var lon=pos.coords.longitude;
x.innerHTML = "My Latitude is : " + lat +
"<br>My Longitude is : " + lon;
}
function showmap(pos){
var latc=pos.coords.latitude;
var lonc=pos.coords.longitude;
const map = L.map('map', {
center: [latc, lonc],
zoom: 3
});
//Adding a base map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
const marker1 = L.marker([latc, lonc]).addTo(map);
}
</script>
</body>
</html>
Melihat Hasilnya
Untuk melihat hasilnya buka loactionfile11.html dalam pelayar Sekarang klik butang untuk mencari lokasi semasa pengguna dilihat dan ditandakan pada peta.
Dalam artikel HTML ini, dua contoh berbeza digunakan untuk menunjukkan cara mencari lokasi semasa pengguna. Pertama, kaedah diperkenalkan untuk memaparkan koordinat lokasi pada halaman selepas mendapatkan lokasi, dan kemudian kaedah menggunakan koordinat ini untuk dipaparkan pada peta sambil memaparkan lokasi dalam halaman HTML diperkenalkan.
Atas ialah kandungan terperinci Bagaimana untuk mencari kedudukan pengguna dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!