HTML5调用地图怎样显示当前所在位置【指南】

html5需用navigator.geolocation获取定位，再借助高德等第三方SDK渲染地图；标签与地理定位无关；必须httpS（localhost除外），需处理权限拒绝、兼容性及逆地理编码。

html5 本身不提供地图，调用“当前定位”靠的是 navigator.geolocation，显示地图得借助第三方地图 SDK（如高德、腾讯、百度或 Leaflet + OpenStreetmap）。直接写

标签没用，那是个旧版图像映射标签，和地理位置无关。

用 navigator.geolocation.getCurrentposition() 获取经纬度

这是最基础且必须的第一步。浏览器会弹提示请求位置权限，用户拒绝就拿不到坐标。

常见错误现象：getCurrentPosition 报错 GeolocationPositionError { code: 1, message: "User denied Geolocation" }，或者长时间无响应（尤其在非 https 环境、ios safari 无后台定位权限、或 chrome 隐私模式下）。

• 必须在 HTTPS 页面运行（localhost 除外），HTTP 下现代浏览器会静默禁用
• 别省略 error 回调，否则失败时完全没反馈
• 加 enableHighAccuracy: true 可提升精度，但耗电、耗时，部分设备可能返回 code: 2（位置不可用）

示例片段：

立即学习“前端免费学习笔记（深入）”；

navigator.geolocation.getCurrentPosition(   (pos) => {     const lat = pos.coords.latitude;     const lng = pos.coords.longitude;     console.log(`纬度：${lat}，经度：${lng}`);   },   (err) => {     console.error("定位失败", err.code, err.message);   },   { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 } );

用高德地图 SDK 在页面上渲染带标记的位置

国内项目最常用高德，需先去 高德开放平台 申请 Web 端 Key，并确认已开通“javaScript API”服务。

关键点：

• 引入 SDK 脚本必须带 key 参数，否则初始化失败，控制台报 Invalid key
• AMap.Map 初始化后，再调用 AMap.Geolocation 更可靠（避免地图未 ready 就定位）
• 标记用 AMap.Marker，注意 position 是 [lng, lat]（不是 [lat, lng]），顺序反了 marker 会飘到非洲

简短示意：

兼容处理与容易被忽略的细节

不是所有设备/浏览器都支持 geolocation，也不是所有地图 SDK 都默认处理定位失败场景。

• 务必检测 navigator.geolocation 是否存在，否则 iOS Safari 旧版或某些国产 webview 会直接报 TypeError
• 高德 Geolocation 控件点击后若失败，不会自动清空 loading 状态，ui 显得卡死——建议自己封装按钮 + 手动控制状态
• 微信内置浏览器（WKWebView）对定位权限管理更严，首次调用常需用户手动打开「微信 > 我 > 设置 > 隐私 > 定位服务」并设为“使用应用期间”
• 安卓某些定制 ROM（如华为 EMUI）会拦截定位请求，需引导用户去系统设置里单独授权该网页所在域名

定位结果只是经纬度，没有地址信息。如需“北京市朝阳区酒仙桥路8号”这种文字描述，必须额外调用高德的 AMap.Geocoder 或腾讯的 geocode 接口做逆地理编码——这属于另一层网络请求，不能省略。