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

有时，任务是找到用户的当前位置，然后在网页上显示位置坐标或在地图上显示位置。使用HTML和javascript代码，本文演示了在HTML页面中获取用户当前位置的过程。通过使用两个不同的示例来展示。在第一个示例中，可以获取用户的当前位置，然后在HTML页面上显示位置坐标。在第二个示例中，使用开源的Leaflet地图库来获取并在地图上显示用户的当前位置。

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

Code Explanation and Design Steps −

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

第二步 – 创建一个标签

立即学习“前端免费学习笔记（深入）”；

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

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

第四步 – 在标签中编写代码，并创建两个函数getYourLoc()和showMyPos(pos)。

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的代码：

         Show My Location Coordinates
            
             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 +         "
My Longitude is : " + pos.coords.longitude;      }

Viewing The Result

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

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

Code Explanation and Design Steps −

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

第二步 – 创建一个标签

立即学习“前端免费学习笔记（深入）”；

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

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

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

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:

      Leaflet Map            body{         margin: 0;         padding: 0;      }      #map {         width: 100vw;         height: 100vh;      }      Show My Location Coordinates
      
      
   // the leaflet library for making maps                     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 +         "
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: '© OpenStreetMap contributors' }).addTo(map);         const marker1 = L.marker([latc, lonc]).addTo(map);      }

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中定位用户的位置？的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551070.html

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