Geolocation API 地理位置

Geolocation API：navigator.geolocation.getCurrentPosition获取位置（经纬度/精度/海拔/速度）、watchPosition持续追踪、PositionOptions（enableHighAccuracy/timeout/maximumAge）、隐私要求HTTPS · 难度：入门 · +10XP

Geolocation API —— 获取用户地理位置

网站可以向浏览器请求用户的地理位置（需要用户授权）。这在天气应用、地图、本地推荐等场景非常常用。

获取位置

navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    console.log(纬度：${latitude}，经度：${longitude});
    console.log(精度：${position.coords.accuracy}米);
  },
  (error) => {
    console.log('获取失败：', error.message);
  },
  { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);

持续追踪位置

const watchId = navigator.geolocation.watchPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.error(err)
);
// navigator.geolocation.clearWatch(watchId); // 停止追踪

动手练习

1. 基础练习：做一个"显示我的位置"按钮，点击后在页面上显示经纬度。
2. 进阶应用：用获取到的经纬度在百度地图或高德地图上标注位置。
3. 项目实战：做一个"附近搜索"——获取用户位置后调用地图API搜索附近的餐厅。