当前位置：首页 > JavaScript

JS实现GPS

2026-02-01 16:25:29JavaScript

GPS定位的基本原理

GPS定位主要通过浏览器提供的Geolocation API实现。该API允许网页获取用户设备的地理位置信息，前提是用户授权同意。位置信息通常来源于设备的GPS模块、Wi-Fi或移动网络信号。

检查浏览器支持性

在使用Geolocation API前，需确认浏览器是否支持该功能。可通过检查navigator.geolocation对象是否存在来判断：

if ("geolocation" in navigator) {
  console.log("Geolocation is supported");
} else {
  console.log("Geolocation is not supported");
}

获取当前位置

使用getCurrentPosition()方法获取设备的当前位置。该方法接受三个参数：成功回调函数、错误回调函数和配置选项对象。

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
  },
  (error) => {
    console.error("Error getting location:", error.message);
  },
  {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  }
);

实时位置跟踪

如需持续获取位置更新（如导航应用），可使用watchPosition()方法。其参数与getCurrentPosition()相同，但会返回一个ID用于停止监听：

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    console.log("Updated location:", position.coords);
  },
  (error) => {
    console.error("Tracking error:", error.message);
  }
);

// 停止跟踪
// navigator.geolocation.clearWatch(watchId);

配置选项说明

enableHighAccuracy: 布尔值，是否尝试获取高精度位置（可能增加耗电量）
timeout: 获取位置的最大等待时间（毫秒）
maximumAge: 允许返回缓存的位置数据的最大年龄（毫秒）

错误处理

常见的错误类型包括：

PERMISSION_DENIED: 用户拒绝位置共享
POSITION_UNAVAILABLE: 无法获取位置信息
TIMEOUT: 请求超时

注意事项

现代浏览器要求通过HTTPS协议使用Geolocation API
移动设备上GPS可能因信号问题返回较慢
用户隐私需被尊重，首次调用时会弹出权限请求对话框

坐标转换示例

获取的坐标通常为WGS84标准，如需转换为其他坐标系（如GCJ-02），需使用专门算法：

function wgs84ToGcj02(lng, lat) {
  // 坐标系转换算法实现
  // ...
  return [newLng, newLat];
}

地图集成示例

将获取的坐标显示在地图上（以Leaflet为例）：

navigator.geolocation.getCurrentPosition((pos) => {
  const map = L.map('map').setView(
    [pos.coords.latitude, pos.coords.longitude], 
    13
  );
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  L.marker([pos.coords.latitude, pos.coords.longitude]).addTo(map);
});