当前位置：首页 > JavaScript

js实现地理位置定位

2026-01-30 20:24:30JavaScript

使用Geolocation API获取地理位置

浏览器提供了Geolocation API，可以通过JavaScript调用获取用户的地理位置信息。该API需要用户授权才能使用。

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log("纬度:", position.coords.latitude);
      console.log("经度:", position.coords.longitude);
    },
    (error) => {
      console.error("获取位置失败:", error.message);
    }
  );
} else {
  console.log("浏览器不支持地理位置功能");
}

监听位置变化

如果需要持续跟踪用户位置变化，可以使用watchPosition方法。这个方法会返回一个ID，用于后续清除监听。

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    console.log("新位置:", position.coords.latitude, position.coords.longitude);
  },
  (error) => {
    console.error("跟踪位置失败:", error.message);
  }
);

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

设置定位选项

可以传递一个选项对象来配置定位请求，包括超时时间、缓存有效期和精度要求。

const options = {
  enableHighAccuracy: true,  // 尝试获取高精度位置
  timeout: 5000,            // 超时时间(毫秒)
  maximumAge: 0             // 不接受超过指定时间的缓存位置
};

navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  options
);

处理权限请求

现代浏览器可能会在首次请求地理位置时弹出权限提示。可以通过Permissions API检查权限状态。

navigator.permissions.query({name: 'geolocation'}).then((result) => {
  if (result.state === 'granted') {
    console.log('已授权地理位置访问');
  } else if (result.state === 'prompt') {
    console.log('将请求地理位置权限');
  } else {
    console.log('地理位置访问被拒绝');
  }
});

使用第三方地图服务

获取到经纬度后，可以结合Google Maps、Mapbox或百度地图等第三方服务显示位置。

// 使用Google Maps显示位置示例
function initMap(lat, lng) {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat, lng},
    zoom: 15
  });
  new google.maps.Marker({position: {lat, lng}, map});
}