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

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”服务。