html函数如何实现地理定位功能 html函数Geolocation API的调用

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
      console.log(`纬度: ${lat}, 经度: ${lng}`);
    },
    function(error) {
      console.error("定位失败:", error.message);
    }
  );
} else {
  console.log("您的浏览器不支持地理定位");
}

{
  enableHighAccuracy: true,  // 是否启用高精度模式（如 GPS）
  timeout: 10000,            // 最大等待时间（毫秒）
  maximumAge: 60000          // 缓存时间，60秒内可复用旧数据
}

function showPosition() {
  const status = document.getElementById("status");
  const mapLink = document.getElementById("map-link");

  if (navigator.geolocation) {
    status.textContent = "正在获取位置...";
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        mapLink.href = `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}`;
        mapLink.textContent = `纬度: ${lat}, 经度: ${lng}`;
        status.textContent = "";
      },
      (error) => {
        switch(error.code) {
          case 1:
            status.textContent = "用户拒绝共享位置";
            break;
          case 2:
            status.textContent = "位置不可用";
            break;
          case 3:
            status.textContent = "请求超时";
            break;
        }
      }
    );
  } else {
    status.textContent = "浏览器不支持地理定位";
  }
}

<p id="status"></p>
<a id="map-link" target="_blank">查看地图</a>
<button onclick="showPosition()">获取我的位置</button>