Leaflet 依赖浏览器 navigator.geolocation API 实现定位，需处理权限、精度、错误等现实问题；推荐使用 map.locate() 封装调用，配合 locationfound/locationerror 事件管理误差圈与图标，并注意 HTTPS 环境及移动端降级策略。
Leaflet 本身不提供地理定位能力，它只负责地图渲染和交互；真正的定位必须依赖浏览器原生的 navigator.geolocation API。集成的关键不是“怎么让 Leaflet 定位”，而是“如何安全、可控地把定位结果喂给 Leaflet，并处理失败、权限拒绝、精度差等现实问题”。
用 navigator.geolocation.getCurrentPosition() 获取用户位置
这是唯一标准、跨浏览器支持的定位入口。不要试图绕过它去调用第三方服务（如 IP 地址粗略定位），那既不准又违反隐私规范。
- 必须在 HTTPS 或 localhost 环境下运行，否则 Chrome/Firefox 会静默拒绝
navigator.geolocation -
回调函数接收
position对象，其position.coords.latitude和position.coords.longitude是你要传给 Leaflet 的坐标 -
position.coords.accuracy单位是米，值越大说明定位越不可靠——建议 > 50 米时提示用户“定位精度较低”，避免直接飞过去误导判断 - 错误回调里常见
error.code === 1（用户拒绝授权）、error.code === 2（位置服务关闭）、error.code === 3（超时，默认 5s）
用 L.map(...).locate() 触发 Leaflet 内置定位流程
Leaflet 封装了 navigator.geolocation 调用，但只是语法糖。它内部仍走同一套 API，优势在于自动绑定地图视图动画和错误提示逻辑。
- 调用前确保地图已初始化且容器有明确宽高，否则
locate()可能静默失败 - 传入选项如
{ setView: true, maxZoom: 15 }控制定位后是否跳转、最大缩放级别；setView: false时只获取坐标，不移动地图 - 监听
locationfound和locationerror事件比直接用原生回调更符合 Leaflet 工作流 - 注意：
locate()不会自动重试失败，需手动捕获locationerror后再次调用
在地图上添加定位图标与误差圈（L.circle + L.divIcon）
单纯跳转到坐标不够直观。用户需要知道“我现在在哪”“这个位置有多准”。Leaflet 没有内置定位控件样式，得自己组合。
立即学习“Java免费学习笔记（深入）”；
- 用
L.circle([lat, lng], { radius: accuracy })绘制误差圈，半径单位是米，Leaflet 会自动按当前缩放换算像素 - 用
L.divIcon({ html: '?', className: '' })创建自定义图标，避免引入额外图片资源；注意设置iconSize和iconAnchor对齐坐标点 - 误差圈和图标应作为同一
L.layerGroup管理，方便后续.clearLayers()一键清除旧定位结果 - 别忘了在
locationerror时移除之前可能已添加的图层，否则多个误差圈会堆叠残留
const map = L.map('map').setView([39.9042, 116.4074], 12);
L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
let locationGroup = L.layerGroup().addTo(map);
map.on('locationfound', function (e) {
const { lat, lng } = e.latlng;
const accuracy = e.accuracy;
locationGroup.clearLayers();
L.circle([lat, lng], { radius: accuracy, color: '#3388ff', fillOpacity: 0.1 }).addTo(locationGroup);
L.marker([lat, lng], {
icon: L.divIcon({ html: '?', className: '', iconSize: [20, 20], iconAnchor: [10, 10] })
}).addTo(locationGroup);
if (e.accuracy > 50) {
console.warn(`定位精度仅 ${accuracy} 米，建议手动调整`);
}
});
map.on('locationerror', function (e) {
locationGroup.clearLayers();
alert('定位失败：' + e.message);
});
// 主动触发定位
map.locate({ setView: false, maxZoom: 16 });
真正难的不是画个圆或标个点，而是判断什么时候该重试、什么时候该降级（比如 fallback 到城市级默认位置）、以及如何在移动端弱网环境下避免反复弹权限请求。这些逻辑不在 Leaflet 文档里，但在真实项目中每天都在发生。
