首頁 > web前端 > html教學 > 如何在HTML中定位使用者的位置?

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

王林
發布: 2023-08-20 21:45:35
轉載
2412 人瀏覽過

如何在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

最新問題
固定定位後會突破原來的定位父級?
來自於 1970-01-01 08:00:00
0
0
0
靜態定位和相對定位的區別
來自於 1970-01-01 08:00:00
0
0
0
php可以定位客戶端嘛
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板