示例1：查找用户的当前位置并在html页面上显示位置坐标。code explanation and design steps −
步骤 1 − 创建一个 html 文件并开始编写代码。
第二步 - 创建一个标签
并将其设置为显示位置坐标。
步骤 3 - 创建一个按钮，并在按钮点击时调用函数 getyourloc()。
第四步 - 在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中编写代码，并创建两个函数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的代码：<!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).
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 resultfor 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中定位用户的位置？的详细内容。