JavaScript可通过navigator.geolocation获取用户经纬度，再用Leaflet等地图库渲染位置标记；需用户授权、仅限安全上下文，支持一次定位或持续跟踪，精度受设备影响。
JavaScript 可以通过浏览器原生的 navigator.geolocation API 获取用户设备的地理坐标（经纬度），再结合地图服务（如 Leaflet、Mapbox 或 Google Maps）将位置标记在地图上。核心分两步：获取定位 + 渲染到地图。
一、使用 navigator.geolocation 获取用户位置
该 API 需用户授权，且仅在安全上下文（https:// 或 localhost）中可用。基本用法如下：
-
调用
getCurrentPosition()请求一次定位：
- 成功回调中，
position.coords包含latitude、longitude、accuracy（精度米数）等字段； - 错误类型包括用户拒绝（
PERMISSION_DENIED）、定位不可用（POSITION_UNAVAILABLE）、超时（TIMEOUT）； - 可传入配置对象控制精度、超时和是否启用高精度模式：
{ enableHighAccuracy: true, timeout: 10000, maximumAge: 30000 }。
二、用 Leaflet 在网页中显示地图并标出位置（轻量推荐）
Leaflet 是开源、易用的地图库，无需 API 密钥。只需引入 CDN 并初始化地图：
立即学习“Java免费学习笔记（深入）”；
- 在 HTML 中引入 Leaflet CSS 和 JS：
css">
- 创建地图容器并初始化：
三、注意事项与常见问题
- 定位可能返回粗略结果（如 Wi-Fi 或 IP 定位），
accuracy值较大（>50 米）时建议提示用户“定位精度较低”； - 移动端需注意：部分 Android 浏览器在后台或省电模式下会禁用定位；
- 若需持续跟踪（如导航），可用
watchPosition()替代getCurrentPosition()，它返回监听 ID，可用clearWatch(id)停止； - 避免在页面加载时立即请求定位——最好由用户点击按钮触发，提升授权通过率。
四、替代方案简述
- Google Maps JavaScript API：功能强但需申请密钥、配额和计费；
- Mapbox GL JS：视觉效果好，也需 Token，适合定制化地图；
- 纯前端离线定位：无法实现——浏览器 geolocation 依赖系统服务（GPS/Wi-Fi/基站），JS 本身不参与计算。
