Geolocation API是实现Web应用位置感知的核心，通过JavaScript调用可获取用户经纬度，适用于天气、地图等场景。首先检测浏览器是否支持：if (navigator.geolocation)，然后使用getCurrentPosition方法获取一次位置，成功回调中提取coords.latitude和coords.longitude，失败则处理错误。需持续追踪时使用watchPosition，配合clearWatch(watchId)停止；可配置enableHighAccuracy、timeout、maximumAge选项。获取坐标后可集成Leaflet或Google Maps显示标记，需在HTML中设置地图容器并初始化。必须尊重用户隐私，在用户操作后请求权限，提供说明并处理拒绝情况，确保良好体验。
要在Web应用中实现位置感知功能，Geolocation API是核心工具。它能让浏览器获取用户的地理位置信息，适用于天气应用、地图服务、本地推荐等场景。只要用户授权，就能通过简单的JavaScript调用获取经纬度数据。
启用Geolocation的基本用法
Geolocation API属于浏览器的navigator对象，使用前应先检测是否支持：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
},
(error) => {
console.error("获取位置失败:", error.message);
}
);
} else {
alert("当前浏览器不支持Geolocation");
}
getCurrentPosition方法接收两个回调函数：成功时返回位置对象，失败时返回错误信息。位置对象的coords属性包含经纬度、海拔、精度等数据。
实时追踪用户位置
如果需要持续获取用户位置（如导航应用），可使用watchPosition方法：
const watchId = navigator.geolocation.watchPosition(
(position) => {
updateMap(position.coords.latitude, position.coords.longitude);
},
(error) => {
console.error("定位追踪出错:", error);
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 60000
}
);
watchPosition会持续监听位置变化，返回一个ID，可用于后续停止追踪：
navigator.geolocation.clearWatch(watchId);
第三个参数为可选配置项：
- enableHighAccuracy：是否启用高精度模式（可能耗电）
- timeout：请求超时时间
- maximumAge：缓存位置的最大有效期
结合地图API展示位置
获取到经纬度后，可将其集成到地图服务中。例如使用Leaflet或Google Maps API显示标记：
function showOnMap(lat, lng) {
const map = L.map('map').setView([lat, lng], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker([lat, lng]).addTo(map).bindPopup("你在这里").openPopup();
}
在HTML中预留地图容器，并确保页面加载完成后初始化地图与定位逻辑。
注意隐私与用户体验
浏览器会在首次调用时弹出权限请求，用户必须允许才能获取位置。建议：
- 在用户触发操作（如点击“查找附近”按钮）后再请求位置
- 提供清晰的提示说明为何需要位置信息
- 处理拒绝授权的情况，给出替代方案或友好提示
基本上就这些。Geolocation API简单易用，配合现代前端框架和地图库，能快速构建出实用的位置感知功能。关键是尊重用户隐私，合理使用权限，并做好错误处理。
