插件窝 干货文章 electron获取位置坐标信息的方法小结

electron获取位置坐标信息的方法小结

坐标 获取 result class 552    来源:    2024-10-18

前端获取位置坐标信息,有以下几种方法:

1.通过原生方法获取

优点:自定随意编写逻辑

缺点:需要授权,或者某些场景没办法获取

 
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);
    }
}

2.直接使用第三方服务

例如:百度地图等一些线上的服务商,只要你自己在使用过程当中没什么限制。

以百度为例,如果是直接自己创建ak,通过

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

去调用的话,精度不高,只去到所在城市的中心点,所以基本没啥用,想要提高精度,增加自己的投入就好。

还有一种,就是直接用map的api:

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

暂时来说,还没遇到使用上的限制,直接通过axios去调用即可(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);
      });
    });
}

上面的方法使用到了coordtransform进行坐标转换,当你直接调用接口获取数据,在使用的时候发现坐标不是很准确,多半是需要转换一下之后再使用。

npm安装一下就好

npm i coordtransform

关于electron应用获取坐标数据,navigator的话,需要https或者是携带证书,搞起来比较麻烦,直接使用第三方服务就比较简单了,上面的方法都是现在常用的获取坐标的方式,可以参考一下,有问题大家不妨讨论讨论。

以上就是electron获取位置坐标信息的方法小结的详细内容,更多关于electron获取坐标信息的资料请关注插件窝其它相关文章!