Geolocation API 失败主因是权限未授权或非安全上下文（需HTTPS/localhost），且iOS需用户手势触发；Mapbox 401因token域名未绑定或容器无宽高；定位点应优先用GeoJSONSource+symbol图层实现响应式渲染；移动端漂移多因系统省电策略降级精度。
Geolocation API 拿不到位置？先检查权限和协议
浏览器的 navigator.geolocation 不是调用就返回坐标，它依赖用户授权和安全上下文。HTTP 页面直接调用会静默失败，必须使用 HTTPS 或 localhost；iOS Safari 还要求页面有用户手势触发（比如点击按钮），不能在页面加载时自动执行。
常见错误现象：PositionError.code === 1（PERMISSION_DENIED）或直接无响应。此时应先确认地址栏有锁图标，并用以下方式防御性调用：
if ("geolocation" in navigator) {
document.getElementById("locate-btn").addEventListener("click", () => {
navigator.geolocation.getCurrentPosition(
(pos) => console.log(pos.coords.latitude, pos.coords.longitude),
(err) => console.error("定位失败:", err.message),
{ enableHighAccuracy: true, timeout: 8000, maximumAge: 30000 }
);
});
} else {
console.warn("浏览器不支持地理定位");
}
注意：enableHighAccuracy 并非总能提升精度，反而可能延长获取时间或失败；maximumAge 设为 0 表示拒绝缓存，设为 Infinity 则只用缓存——多数场景设 30 秒较合理。
Mapbox GL JS 加载地图时提示 401 或空白？密钥和域名绑定是关键
Mapbox 要求每个 access_token 绑定合法域名（含端口），本地开发用 localhost 或 127.0.0.1 默认允许，但 file:// 协议、IP 地址直连、或未配置 CORS 的代理都会导致地图瓦片 401 或白屏。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 从 Mapbox Account Tokens 页面 创建新 token，勾选
Downloads: Read和Styles: Read，并在Allowed URLs中添加你的开发地址（如http://localhost:3000/*） - 初始化地图前确保 DOM 元素已存在且有明确宽高（
height: 400px必须写死或通过 CSS 设置，否则容器尺寸为 0） - 不要把 token 硬编码在前端代码里用于生产环境——它本质是公开凭证，仅靠域名白名单防护
最小可用示例：
<div id="map" style="width: 100%; height: 400px;"></div>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.19.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.19.0/mapbox-gl.css" rel="stylesheet">
<script>
mapboxgl.accessToken = 'your_public_token_here';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [116.3974, 39.9093], // lng, lat
zoom: 12
});
</script>
把定位点画到 Mapbox 地图上，别用 marker.add() 直接塞坐标
直接用 new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map) 可以显示标记，但它不随地图缩放/旋转变化而自动重绘，也不参与 WebGL 渲染管线——适合静态标注。若要响应式、高性能地渲染定位点（尤其配合实时追踪），应使用 GeoJSONSource + symbol 图层。
正确做法：
- 创建空的 GeoJSON source：
map.addSource('location-point', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } }) - 添加 symbol 图层并绑定该 source
- 定位成功后，用
map.getSource('location-point').setData({ ... })更新 feature，地图自动重绘
这样做的好处：避免频繁创建/销毁 DOM 节点；支持 icon 大小随缩放变化；可叠加 popup、hover 效果；与轨迹线等其他矢量数据统一管理。
移动端定位漂移严重？别只怪 GPS，先关掉“省电模式”
Android 和 iOS 在后台或低电量时会主动降级定位精度（比如从 GPS 切到 Wi-Fi + 基站粗略定位），导致坐标跳变或偏移数百米。这不是代码问题，而是系统策略。
缓解手段有限但有效：
- 提醒用户关闭系统级“省电模式”或“优化电池使用”中对浏览器的限制（Chrome / Safari）
- 在
getCurrentPosition中设置{ enableHighAccuracy: true }，并接受更长等待（timeout: 15000） - 对连续多次定位结果做简单滤波：丢弃与前一次距离 > 100 米的突变点（需结合
coords.accuracy判断可信度） - 不依赖单次定位，改用
navigator.geolocation.watchPosition持续监听，取稳定后的平均值
真实场景中，城市峡谷、地铁站、封闭商场内定位本身不可靠，代码再严谨也解决不了物理限制——这点常被忽略，却直接影响用户体验预期。
