如何调用HTML5地理定位Geolocation接口并结合地图展示当前位置-H5教程-PHP中文网

html5 geolocation获取用户位置并在地图展示需两步：先用navigator.geolocation获取经纬度，再传给地图sdk（如leaflet）渲染标记；须处理权限、失败及精度问题。

如何调用html5地理定位geolocation接口并结合地图展示当前位置

调用 HTML5 Geolocation 接口获取用户当前位置，并在地图上展示，核心是两步：先用 navigator.geolocation 获取经纬度，再将坐标传给地图 SDK（如高德、百度或 Leaflet）渲染标记。整个过程需处理权限、失败场景和坐标精度问题。

一、检查浏览器支持并请求用户位置

Geolocation 是受用户授权保护的 API，必须在 HTTPS 环境下运行（本地 file:// 或 http://localhost 通常也允许）。调用前建议先检测支持性：

使用 navigator.geolocation 判断是否可用
调用 getCurrentPosition() 获取一次定位，或 watchPosition() 持续监听
必须提供 success 和 error 回调函数，不能忽略错误处理

示例代码：

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log("定位成功：", latitude, longitude);
      showOnMap(latitude, longitude); // 后续传给地图
    },
    (error) => {
      console.error("定位失败：", error.code, error.message);
      alert("无法获取位置，请检查定位权限或网络");
    },
    {
      enableHighAccuracy: true, // 尝试高精度（如 GPS），但可能更慢、更耗电
      timeout: 10000,           // 最长等待 10 秒
      maximumAge: 60000         // 接受 1 分钟内缓存的位置
    }
  );
} else {
  alert("您的浏览器不支持地理定位功能");
}

二、选择地图 SDK 并初始化地图容器

主流轻量方案推荐：Leaflet（开源免费，适合初学者） 或国内常用的 高德地图 JS API、百度地图 JS API。以 Leaflet 为例：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

引入 Leaflet CSS 和 JS（CDN 即可）
准备一个带 id 的 <div> 作为地图容器，并设置宽高（如 <code>height: 400px）
用 L.map() 初始化，用 L.tileLayer() 加载底图瓦片（推荐 OpenStreetMap 或国内合规图源）

关键片段：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"><script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script><div id="map" style="height: 400px;"></div>

<script>
const map = L.map('map').setView([0, 0], 13); // 初始中心设为 0,0，后续会更新
L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
</script>

三、在地图上添加定位标记与信息窗

拿到经纬度后，创建标记（marker）、绑定弹窗（popup），并让地图自动定位到该点：

用 L.marker([lat, lng]).addTo(map) 添加图标
用 .bindPopup("您当前的位置") 绑定提示文字
用 map.setView([lat, lng], 15) 聚焦并缩放到合适级别（15 级适合街道级）
可选：用 L.circle([lat, lng], { radius: accuracy }) 绘制误差范围圆（position.coords.accuracy 单位是米）

整合进定位回调中：

function showOnMap(lat, lng) {
  // 清除旧标记（避免重复）
  if (window.currentMarker) window.currentMarker.remove();

  // 添加新标记
  window.currentMarker = L.marker([lat, lng])
    .addTo(map)
    .bindPopup("? 这是您的当前位置")
    .openPopup();

  // 定位到该点，缩放至街道级
  map.setView([lat, lng], 15);

  // 可选：绘制精度圈（如果 accuracy 可用）
  const accuracy = position.coords.accuracy;
  if (accuracy && accuracy