HTML5需用navigator.geolocation获取定位，再借助高德等第三方SDK渲染地图；标签与地理定位无关；必须HTTPS（localhost除外），需处理权限拒绝、兼容性及逆地理编码。
HTML5 本身不提供地图，调用“当前定位”靠的是 navigator.geolocation，显示地图得借助第三方地图 SDK（如高德、腾讯、百度或 Leaflet + OpenStreetMap）。直接写 <map></map> 标签没用，那是个旧版图像映射标签，和地理位置无关。
用 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 会飘到非洲
简短示意：
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY"></script>
<div id="map" style="width:100%;height:400px;"></div>
<script>
const map = new AMap.Map('map', { zoom: 14 });
map.on('load', () => {
const geo = new AMap.Geolocation();
map.addControl(geo);
geo.getCurrentPosition((status, result) => {
if (status === 'complete') {
const marker = new AMap.Marker({
position: [result.position.lng, result.position.lat]
});
map.add(marker);
map.setCenter([result.position.lng, result.position.lat]);
}
});
});
</script>
兼容处理与容易被忽略的细节
不是所有设备/浏览器都支持 geolocation，也不是所有地图 SDK 都默认处理定位失败场景。
- 务必检测
navigator.geolocation是否存在，否则 iOS Safari 旧版或某些国产 WebView 会直接报TypeError - 高德
Geolocation控件点击后若失败，不会自动清空 loading 状态，UI 显得卡死——建议自己封装按钮 + 手动控制状态 - 微信内置浏览器（WKWebView）对定位权限管理更严，首次调用常需用户手动打开「微信 > 我 > 设置 > 隐私 > 定位服务」并设为“使用应用期间”
- 安卓某些定制 ROM（如华为 EMUI）会拦截定位请求，需引导用户去系统设置里单独授权该网页所在域名
定位结果只是经纬度，没有地址信息。如需“北京市朝阳区酒仙桥路8号”这种文字描述，必须额外调用高德的 AMap.Geocoder 或腾讯的 geocode 接口做逆地理编码——这属于另一层网络请求，不能省略。
