当前位置：首页 > JavaScript

js 实现定位

2026-03-02 08:06:02JavaScript

使用 Geolocation API 获取当前位置

浏览器原生提供的 navigator.geolocation 接口可直接获取用户地理位置。需用户授权后生效：

js 实现定位

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`纬度: ${latitude}, 经度: ${longitude}`);
    },
    (error) => {
      console.error(`定位错误: ${error.message}`);
    }
  );
} else {
  console.error("浏览器不支持地理定位");
}

通过 IP 地址粗略定位

当用户拒绝共享精确位置时，可通过第三方 IP 定位服务获取大致位置。例如使用 ipapi.co：

js 实现定位

fetch('https://ipapi.co/json/')
  .then(response => response.json())
  .then(data => {
    console.log(`国家: ${data.country_name}, 城市: ${data.city}`);
  });

高德/百度地图 SDK 集成

国内项目建议使用地图厂商的 SDK 实现精确定位：

// 高德地图示例
AMap.plugin('AMap.Geolocation', () => {
  const geolocation = new AMap.Geolocation();
  geolocation.getCurrentPosition((status, result) => {
    if (status === 'complete') {
      console.log(result.position);
    } else {
      console.error(result.message);
    }
  });
});

监听位置变化

持续跟踪用户移动需使用 watchPosition，适用于导航类应用：

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    console.log(position.coords.speed); // 获取移动速度
  },
  null,
  { enableHighAccuracy: true }
);

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