如何在HTML中定位使用者的位置？-html教學-PHP中文網

首頁

web前端

html教學

如何在HTML中定位使用者的位置？

王林

Aug 20, 2023 pm 09:45 PM

html定位使用者位置定位用戶位置

如何在HTML中定位使用者的位置？

有時，任務是找到使用者目前的位置，然後在網頁上顯示位置座標或在地圖上顯示位置。使用HTML和javascript程式碼，本文示範了在HTML頁面中取得使用者目前位置的過程。透過使用兩個不同的範例來展示。在第一個範例中，可以取得使用者目前的位置，然後在HTML頁面上顯示位置座標。在第二個範例中，使用開源的Leaflet地圖庫來取得並在地圖上顯示使用者的目前位置。

範例1：尋找使用者的目前位置並在html頁面上顯示位置座標。

Code Explanation and Design Steps −

#步驟 1 − 建立一個 HTML 檔案並開始編寫程式碼。

第二步 - 建立一個標籤

並將其設定為顯示位置座標。

步驟 3 - 建立一個按鈕，並在按鈕點擊時呼叫函數 getYourLoc()。

第四步 - 在<script>標籤中寫程式碼，並建立兩個函數getYourLoc()和showMyPos(pos)。 </script>

Step 5 − Write the javascript code in getYourLoc() to find the current location using navigator.geolocation.getCurrentPosition() and then call showMyPos(pos).

步驟6 - 將位置加入到先前建立的

標籤中，使用showMyPos(pos)。檢查結果。

Important file used − locationfile.html

Code For parentFolderFile.html:

的中文翻譯為：

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>

Viewing The Result

要查看結果，請在瀏覽器中開啟loactionfile.html檔案。現在點擊按鈕以尋找用戶的當前位置。座標將顯示在html頁面上。

範例2：尋找使用者目前位置並在地圖上顯示位置座標。

Code Explanation and Design Steps −

#步驟 1 − 建立一個 HTML 檔案並開始編寫程式碼。

第二步 - 建立一個標籤

並將其設定為顯示位置座標。

步驟 3 - 建立一個按鈕，並在按鈕點擊時呼叫函數 getYourLoc()。

Step 4 − Inside the <script> tags write the code and make three functions getYourLoc() , showMyPos(pos), and showmap(pos).</script>

Step 5 − Write the javascript code in getYourLoc() to find the current location using navigator.geolocation.getCurrentPosition() and then call both the functions showMyPos(pos) and showmap(pos).

步驟6 - 在函數showmap(pos)中顯示地圖時，包括leaflet庫，使用基礎地圖，設定標記並傳遞當前位置座標以標記地圖位置。

第7步驟 - 使用showMyPos（pos）將位置新增至先前建立的

標籤中。同時顯示地圖。檢查結果。

Important file used − locationfile11.html

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

Viewing The Result

For seeing the result open the loactionfile11.html in a browser. Now click the button to find the current location of the user. The coordinates are seen and marked on the map.

在這個HTML文章中，使用兩個不同的範例展示如何找到使用者目前位置的方法。首先，介紹了一種方法，在獲取位置後，在頁面上顯示位置座標，然後介紹了在HTML頁面中顯示位置的同時，使用這些座標在地圖上顯示的方法。

以上是如何在HTML中定位使用者的位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，