JavaScript可通过navigator.geolocation获取用户经纬度，再用Leaflet等地图库渲染位置标记；需用户授权、仅限安全上下文，支持一次定位或持续跟踪，精度受设备影响。
JavaScript 可以通过浏览器原生的 navigator.geolocation API 获取用户设备的地理坐标（经纬度），再结合地图服务（如 Leaflet、Mapbox 或 Google Maps）将位置标记在地图上。核心分两步：获取定位 + 渲染到地图。
一、使用 navigator.geolocation 获取用户位置
该 API 需用户授权，且仅在安全上下文（https:// 或 localhost）中可用。基本用法如下：
-
调用
getCurrentPosition()请求一次定位：
<script>
navigator.geolocation.getCurrentPosition(
position => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
},
error => {
console.error('定位失败:', error.message);
}
);
</script>
- 成功回调中，
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：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
- 创建地图容器并初始化：
<div id="map" style="height: 400px;"></div>
<script>
const map = L.map('map').setView([0, 0], 2); // 初始视图
L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 定位成功后添加标记
navigator.geolocation.getCurrentPosition(
pos => {
const { latitude, longitude } = pos.coords;
L.marker([latitude, longitude]).addTo(map)
.bindPopup(`您的位置：
纬度 ${latitude.toFixed(5)}
经度 ${longitude.toFixed(5)}`).openPopup();
map.setView([latitude, longitude], 14); // 缩放到当前位置
}
);
</script>
三、注意事项与常见问题
- 定位可能返回粗略结果（如 Wi-Fi 或 IP 定位），
accuracy值较大（>50 米）时建议提示用户“定位精度较低”； - 移动端需注意：部分 Android 浏览器在后台或省电模式下会禁用定位；
- 若需持续跟踪（如导航），可用
watchPosition()替代getCurrentPosition()，它返回监听 ID，可用clearWatch(id)停止； - 避免在页面加载时立即请求定位——最好由用户点击按钮触发，提升授权通过率。
四、替代方案简述
- Google Maps JavaScript API：功能强但需申请密钥、配额和计费；
- Mapbox GL JS：视觉效果好，也需 Token，适合定制化地图；
- 纯前端离线定位：无法实现——浏览器 geolocation 依赖系统服务（GPS/Wi-Fi/基站），JS 本身不参与计算。
