数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在HTML中定位用户位置？
有时，任务是找到用户的当前位置，然后在网页上显示位置坐标或在地图上显示位置。本文使用HTML和Javascript代码演示了在HTML页面中获取用户当前位置的过程。这通过两个不同的示例来说明。在第一个示例中，可以获取用户的当前位置，然后在HTML页面上显示位置坐标。在第二个示例中，使用开源Leaflet地图库来获取并在地图上显示用户的当前位置。
示例1：查找用户的当前位置并在html页面上显示位置坐标。
代码解释和设计步骤 −
步骤1 − 创建一个HTML文件并开始编写代码。
步骤2 − 创建一个<p>标签
并将其设置为显示位置坐标。
步骤3 − 创建一个按钮，并在点击按钮时调用函数getYourLoc()。
步骤4 − 在<script>标签内编写代码，并创建两个函数getYourLoc()和showMyPos(pos)。
步骤5 − 在getYourLoc()中编写javascript代码，使用navigator.geolocation.getCurrentPosition()查找当前位置，然后调用showMyPos(pos)。
步骤6 − 使用showMyPos(pos)将位置添加到
之前创建的<p>标签中。检查结果。
使用的重要文件 − locationfile.html
locationfile.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>
查看结果
要查看结果，请在浏览器中打开locationfile.html。现在点击按钮查找用户的当前位置。坐标将显示在html页面上。
示例2：查找用户的当前位置并在地图上显示位置坐标。
代码解释和设计步骤 −
步骤1 − 创建一个HTML文件并开始编写代码。
步骤2 − 创建一个<p>标签
并将其设置为显示位置坐标。
步骤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)将位置添加到
之前创建的<p>标签中。同时显示地图。检查结果。
使用的重要文件 − locationfile11.html
locationfile11.html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Leaflet Map</title> <link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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>
查看结果
要查看结果，请在浏览器中打开locationfile11.html。现在点击按钮查找用户的当前位置。坐标将显示在地图上并被标记。
在这篇HTML文章中，通过两个不同的示例，展示了如何查找用户当前位置的方法。首先介绍了在获取位置后在页面上显示位置坐标的方法，然后介绍了在HTML页面中显示位置的同时在地图上使用这些坐标的方法。
浏览量：308
