国内项目必须用高德或腾讯地图，因其符合甲级测绘资质政策要求；高德支持Wi-Fi+IP融合定位，腾讯在微信内兼容性更好；Leaflet+OSM适合海外或定制化场景，但需注意坐标系偏移和请求限制。
HTML5 本身不提供地图能力，所谓“调用地图”实际是通过 JavaScript SDK 在浏览器中加载第三方地图服务。选哪个，取决于你真正需要什么：国内合规、定位精度、矢量渲染、离线支持，还是开发体验。
国内项目必须用高德或腾讯地图
因为政策要求所有在中国大陆提供地理信息服务的网站/应用，必须使用具备甲级测绘资质的地图服务商。百度地图虽有资质，但其 Web SDK 自 2023 年起对未备案域名强制限流；高德（Amap）和腾讯地图（TencentMap）目前对个人开发者和中小项目更友好，且文档更新及时。
- 高德地图 SDK 支持
AMap.Geolocation精准获取 HTML5navigator.geolocation的补充定位（如 Wi-Fi + IP 融合） - 腾讯地图在微信内嵌页兼容性更好，
qq.maps.Map对touchmove阻断处理更轻量 - 两者都要求申请 key，且需在控制台绑定域名——未绑定会直接报错
INVALID_REQUEST
Leaflet + OpenStreetMap 适合国际项目或定制化强的场景
如果你面向海外用户，或需要完全自控图层（比如叠加 GeoJSON 工业管线、热力图、WMS），Leaflet 是最轻量可靠的方案。它不提供底图，但可自由接入 OpenStreetMap、Mapbox 或自建瓦片服务。
-
Leaflet体积仅 ~40KB，无额外依赖，与 Vue/React 都能无缝集成 - 注意：
OpenStreetMap免费瓦片有请求频率限制（默认 1 请求/秒），商用需配缓存或换商业源（如Mapbox的mapboxgl） - 不支持国内坐标系（GCJ-02），直接在中国显示会有偏移，必须手动纠偏或改用高德/腾讯的瓦片
避免踩坑：HTML5 navigator.geolocation 和地图 SDK 不是一回事
很多开发者以为调用 navigator.geolocation.getCurrentPosition() 就等于“调用了地图”，其实这只是获取经纬度坐标。能否在地图上标出来、是否准确、是否触发权限弹窗，全看后续怎么用这个坐标。
立即学习“前端免费学习笔记（深入）”；
- Chrome 对
http://协议禁用geolocation，必须用https://或localhost - 高德 SDK 的
AMap.Geolocation会自动 fallback 到 IP 定位，但返回的坐标仍是 GCJ-02 偏移坐标，不能直接扔给OpenStreetMap - 腾讯地图的
qq.maps.Geolocation在 iOS Safari 下偶尔失败，建议加超时重试逻辑
真正难的不是“选哪家”，而是坐标系转换、权限降级策略、以及地图容器在移动端的 touch 事件冲突。这些细节没处理好，再好的 SDK 也会白搭。
