地理位置定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>附近活动</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 480px; margin: 40px auto; }
    button { padding: 10px 20px; border: none; border-radius: 8px;
             background: #39C5BB; color: #fff; font-size: 16px; cursor: pointer; }
    #status { margin-top: 16px; color: #555; line-height: 1.7; }
  </style>
</head>
<body>
  <h2>同城交流活动</h2>
  <p>场地：市青年文化中心</p>
  <button id="btn">查看我离场地多远</button>
  <p id="status">点击按钮后，浏览器会询问是否允许获取位置。</p>

  <script>
    // 场地坐标（示例：上海人民广场附近）
    const VENUE = { lat: 31.2304, lng: 121.4737 };
    const status = document.getElementById('status');

    document.getElementById('btn').addEventListener('click', () => {
      if (!('geolocation' in navigator)) {
        status.textContent = '你的浏览器不支持定位，请手动选择城市。';
        return;
      }
      status.textContent = '正在定位……';

      navigator.geolocation.getCurrentPosition(onSuccess, onError, {
        timeout: 10000,        // 10 秒拿不到就报超时
        maximumAge: 5 * 60000, // 允许用 5 分钟内的缓存位置，更快也更省电
      });
    });

    function onSuccess(pos) {
      const { latitude, longitude, accuracy } = pos.coords;
      const dist = haversine(latitude, longitude, VENUE.lat, VENUE.lng);
      status.textContent =
        `距离场地约 ${dist.toFixed(1)} 公里` +
        `（定位精度 ±${Math.round(accuracy)} 米）`;
    }

    function onError(err) {
      if (err.code === err.PERMISSION_DENIED) {
        status.textContent = '你拒绝了定位。可以在地址栏图标里重新允许，或手动选择城市。';
      } else if (err.code === err.TIMEOUT) {
        status.textContent = '定位超时，请检查网络或稍后再试。';
      } else {
        status.textContent = '暂时拿不到位置，请手动选择城市。';
      }
    }

    // 球面距离（千米），公式见第 4 节
    function haversine(lat1, lng1, lat2, lng2) {
      const R = 6371;
      const toRad = (d) => (d * Math.PI) / 180;
      const a =
        Math.sin(toRad(lat2 - lat1) / 2) ** 2 +
        Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
        Math.sin(toRad(lng2 - lng1) / 2) ** 2;
      return R * 2 * Math.asin(Math.sqrt(a));
    }
  </script>
</body>
</html>

const { state } = await navigator.permissions.query({ name: 'geolocation' });
// 'granted' 已允许 | 'denied' 已拒绝 | 'prompt' 还没问过
if (state === 'denied') {
  showCityPicker();            // 直接降级，不再发起注定失败的请求
} else {
  enableLocateButton();        // 才把"查看附近"按钮亮出来
}

class Geofence {
  constructor(lat, lng, radiusMeters) {
    this.center = { lat, lng };
    this.radius = radiusMeters;
  }
  contains(lat, lng) {
    return haversine(lat, lng, this.center.lat, this.center.lng) * 1000
      <= this.radius;
  }
}

const fence = new Geofence(31.2304, 121.4737, 500); // 场地 500 米范围
// watchPosition 回调里：fence.contains(pos.coords.latitude, pos.coords.longitude)
// 进入范围 -> 弹提示；退出 -> 重置状态