有时，任务是找到用户的当前位置，然后在网页上显示位置坐标或在地图上显示位置。使用HTML和javascript代码，本文演示了在HTML页面中获取用户当前位置的过程。通过使用两个不同的示例来展示。在第一个示例中，可以获取用户的当前位置，然后在HTML页面上显示位置坐标。在第二个示例中，使用开源的Leaflet地图库来获取并在地图上显示用户的当前位置。
示例1：查找用户的当前位置并在html页面上显示位置坐标。
Code Explanation and Design Steps −
步骤 1 − 创建一个 HTML 文件并开始编写代码。
第二步 - 创建一个标签
立即学习“前端免费学习笔记（深入）”；
并将其设置为显示位置坐标。
步骤 3 - 创建一个按钮，并在按钮点击时调用函数 getYourLoc()。
第四步 - 在
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
Viewing The Result
要查看结果，请在浏览器中打开loactionfile.html文件。现在点击按钮以查找用户的当前位置。坐标将显示在html页面上。
示例2：查找用户当前位置并在地图上显示位置坐标。
Code Explanation and Design Steps −
步骤 1 − 创建一个 HTML 文件并开始编写代码。
第二步 - 创建一个标签
立即学习“前端免费学习笔记（深入）”；
并将其设置为显示位置坐标。
步骤 3 - 创建一个按钮，并在按钮点击时调用函数 getYourLoc()。
Step 4 − Inside the
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 Show My Location Coordinates
// the leaflet library for making maps
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页面中显示位置的同时，使用这些坐标在地图上显示的方法。
