如何在 HTML 中定位用户的位置?

htmlweb developmentfront end technology更新于 2024/4/16 3:56:17

有时，我们需要找到用户的当前位置，然后在网页上显示位置坐标或在地图上显示该位置。本文将使用 HTML 和 JavaScript 代码演示如何在 HTML 页面中获取用户当前位置。我们将通过两个不同的示例来演示。在第一个示例中，我们可以获取用户的当前位置，然后在 HTML 页面上显示位置坐标。在第二个示例中，我们使用开源 Leaflet 地图库来获取用户当前位置，并在地图上显示该位置。

示例 1:查找用户当前位置并在 HTML 页面上显示位置坐标。

代码说明和设计步骤 −

步骤 1 − 创建 HTML 文件并开始编写代码。

步骤 2 − 创建标签

并将其设置为显示位置坐标。

步骤 3 − 创建一个按钮，并在点击按钮时调用 getYourLoc() 函数。

步骤 4 − 在 <script> 中标签编写代码，并创建两个函数 getYourLoc() 和 showMyPos(pos)。

步骤 5 − 在 getYourLoc() 中编写 JavaScript 代码，使用 navigator.geolocation.getCurrentPosition() 查找当前位置，然后调用 showMyPos(pos)。

步骤 6 − 使用 showMyPos(pos) 将位置添加到之前创建的

标签中。检查结果。

使用的重要文件 − locationfile.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>

查看结果

要查看结果，请在浏览器中打开 loactionfile.html。现在点击按钮查找用户的当前位置。坐标显示在 html 页面上。

示例 2:查找用户的当前位置并在地图上显示位置坐标。

代码说明和设计步骤 −

步骤 1 − 创建 HTML 文件并开始编写代码。

步骤 2 − 创建标签

并将其设置为显示位置坐标。

步骤 3 − 创建一个按钮，并在点击按钮时调用 getYourLoc() 函数。

步骤 4 − 在 <script> 中标签编写代码并创建三个函数:getYourLoc()、showMyPos(pos) 和 showmap(pos)。

步骤 5 − 在 getYourLoc() 中编写 JavaScript 代码，使用 navigator.geolocation.getCurrentPosition() 查找当前位置，然后调用 showMyPos(pos) 和 showmap(pos) 函数。

步骤 6 − 为了显示地图，在 showmap(pos) 函数(包括 leaflet 库)中，使用基础地图，设置标记并传递当前位置坐标以标记地图位置。

步骤 7 − 使用 showMyPos(pos) 将位置添加到之前创建的

标签中。同时，显示地图。检查结果。

使用的重要文件 − locationfile11.html

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>