Bagaimana untuk mencari kedudukan pengguna dalam HTML?-html tutorial-php.cn

Bagaimana untuk mencari kedudukan pengguna dalam HTML?

王林

Lepaskan： 2023-08-20 21:45:35

ke hadapan

2258 orang telah melayarinya

Bagaimana untuk mencari kedudukan pengguna dalam HTML?

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 dan buat dua fungsi getYourLoc() dan showMyPos(pos).

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 bagi

Code 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>

Salin selepas log masuk

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 tulis kod dan buat tiga fungsi getYourLoc() , showMyPos(pos) dan showmap(pos).

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>

Salin selepas log masuk

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!