js实现地理位置定位

使用Geolocation API获取地理位置

navigator.geolocation.getCurrentPosition方法可以获取设备的当前位置。该方法接收三个参数：成功回调函数、错误回调函数和配置选项。

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log('纬度:', position.coords.latitude);
    console.log('经度:', position.coords.longitude);
  },
  (error) => {
    console.error('获取位置失败:', error.message);
  },
  {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  }
);

持续监听位置变化

watchPosition方法可以持续监听设备位置变化，返回一个watchID用于清除监听。

const watchID = navigator.geolocation.watchPosition(
  (position) => {
    console.log('新位置:', position.coords.latitude, position.coords.longitude);
  },
  (error) => {
    console.error('监听位置错误:', error.message);
  }
);

// 停止监听
// navigator.geolocation.clearWatch(watchID);

处理权限请求

现代浏览器要求地理位置权限必须通过用户交互触发。可以在按钮点击事件中调用定位功能。

<button id="locate">获取位置</button>
<script>
  document.getElementById('locate').addEventListener('click', () => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        alert(`您的位置: ${position.coords.latitude}, ${position.coords.longitude}`);
      }
    );
  });
</script>

检查浏览器支持

在使用前应检查浏览器是否支持Geolocation API。

if ('geolocation' in navigator) {
  // 浏览器支持地理位置功能
} else {
  console.error('该浏览器不支持地理位置功能');
}

获取更多位置信息

成功回调的position对象包含丰富的位置信息。

navigator.geolocation.getCurrentPosition((position) => {
  console.log('位置精度:', position.coords.accuracy);
  console.log('海拔:', position.coords.altitude);
  console.log('海拔精度:', position.coords.altitudeAccuracy);
  console.log('方向:', position.coords.heading);
  console.log('速度:', position.coords.speed);
  console.log('时间戳:', new Date(position.timestamp));
});

错误处理

Geolocation API可能返回多种错误，应妥善处理。

navigator.geolocation.getCurrentPosition(
  () => {},
  (error) => {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        console.error('用户拒绝了位置请求');
        break;
      case error.POSITION_UNAVAILABLE:
        console.error('位置信息不可用');
        break;
      case error.TIMEOUT:
        console.error('请求位置超时');
        break;
      case error.UNKNOWN_ERROR:
        console.error('未知错误');
        break;
    }
  }
);