如何在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）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，