HTML5调用地图内嵌第三方地图选哪个好【介绍】

国内项目必须用高德或腾讯地图，因其符合甲级测绘资质政策要求；高德支持Wi-Fi+IP融合定位，腾讯在微信内兼容性更好；Leaflet+OSM适合海外或定制化场景，但需注意坐标系偏移和请求限制。

html5 本身不提供地图能力，所谓“调用地图”实际是通过 JavaScript SDK 在浏览器中加载第三方地图服务。选哪个，取决于你真正需要什么：国内合规、定位精度、矢量渲染、离线支持，还是开发体验。

国内项目必须用高德或腾讯地图

因为政策要求所有在中国大陆提供地理信息服务的网站/应用，必须使用具备甲级测绘资质的地图服务商。百度地图虽有资质，但其 Web SDK 自 2023 年起对未备案域名强制限流；高德（Amap）和腾讯地图（TencentMap）目前对个人开发者和中小项目更友好，且文档更新及时。

• 高德地图 SDK 支持 AMap.Geolocation 精准获取 html5 navigator.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 也会白搭。