Electron 获取位置坐标的两种实现方案与坐标转换

在开发中，前端获取位置坐标信息通常有以下几种实现路径：

原生 API 获取定位

第一种方式是通过浏览器原生 API 进行获取。

该方式的优势在于逻辑编写具有高度自定义性，开发者可以根据具体需求灵活处理定位数据。

其局限性在于需要用户明确授权，且在部分特定场景或安全策略严格的浏览器环境中可能无法成功获取。

 
function handlePosition (position: GeolocationPosition) {
    console.debug(position);
 
    /*
        {
            coords: {
                accuracy: 1804475.2390180232
                altitude: null
                altitudeAccuracy: null
                heading: null
                latitude: 123.123
                longitude: 123.123
                speed: null
            }
        }
    */
}
 
function handlePositionError (e: GeolocationPositionError) {
    switch (e.code) {
      case e.PERMISSION_DENIED:
        logger.info('位置服务被拒绝', e.message);
        break;
      case e.POSITION_UNAVAILABLE:
        logger.info('暂时获取不到位置信息', e.message);
        break;
      case e.TIMEOUT:
        logger.info('获取信息超时', e.message);
        break;
      default:
        logger.info('未知错误', e.message);
        break;
    }
};
 
 
function setLocation () {
const options = {
      //是否使用高精度设备，如GPS。默认是true
      enableHighAccuracy: true,
      //超时时间，单位毫秒，默认为0
      timeout: 5000,
      //使用设置时间内的缓存数据，单位毫秒
      //默认为0，即始终请求新数据
      //如设为Infinity，则始终使用缓存数据
      maximumAge: 0,
    };
    if (navigator.permissions) {
      navigator.permissions.query({ name: 'geolocation' }).then(function (result) {
        console.debug('permissions:', result.state);
        if (result.state === 'granted') {
          navigator.geolocation.getCurrentPosition(handlePosition, handlePositionError, options);
        } else if (result.state === 'prompt') {
          navigator.geolocation.getCurrentPosition(handlePosition, handlePositionError, options);
        } else if (result.state === 'denied') {
          alert('Permission denied. Please allow location access in your browser settings.');
        }
      });
    } else {
      navigator.geolocation.getCurrentPosition(handlePosition, handlePositionError, options);
    }
}

第三方地图服务调用

第二种方式是直接调用第三方地图服务商的接口。

常见的服务商包括百度地图等在线平台，只要用户在使用过程中未遇到服务限制，即可直接调用。

以百度地图为例，如果开发者自行创建 API Key（ak）并通过网络请求直接调用，

https://api.map.baidu.com/location/ip?ip=***&coor=bd09ll&ak=***

其定位精度通常较低，往往只能定位到所在城市中心点，实用性有限。若需提高精度，通常需要增加额外的投入或配置。

另一种更简便的做法是直接调用百度地图的地图 API 接口：

https://map.baidu.com/?qt=ipLocation&t=${Date.now()}

目前该方法在实际使用中尚未遇到明显的限制，开发者可以直接通过 axios 发起 GET 请求进行调用（使用 ajax 等其他 GET 方式亦可）。

function setLocationByBaidu(){
    axios.get(`https://map.baidu.com/?qt=ipLocation&t=${Date.now()}`).then(response => {
      const gcj02Lng = response.data.rgc.result.location.lng;
      const gcj02Lat = response.data.rgc.result.location.lat;
      // 转换成 gcj02 坐标
      const gcj02 = coordtransform.bd09togcj02(gcj02Lng, gcj02Lat);
      // 再转换为 wgs84 坐标
      const wgs84 = coordtransform.gcj02towgs84(gcj02[0], gcj02[1]);
      console.debug('db09 坐标：', response.data.rgc.result.location.lng, response.data.rgc.result.location.lat);
      console.debug('gcj02 坐标：', gcj02);
      console.debug('WGS84 坐标：', wgs84);
      });
    });
}

上述方案中涉及了 库进行坐标转换。当直接调用接口获取数据时，如果发现坐标与实际位置存在偏差，通常是因为未进行坐标转换，需转换后再使用。

只需通过 npm 安装该库即可：

npm i coordtransform

在 Electron 应用中获取坐标数据时，若使用 navigator 原生方法，通常要求环境为 https 或携带有效证书，配置相对繁琐。相比之下，直接使用第三方服务更为简单。上述方法是目前获取坐标信息的常用方案，供参考交流。

以上为 Electron 获取位置坐标信息的完整方法总结，更多相关技术细节可关注本站其他文章。