脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → electron获取坐标信息

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

 更新时间：2024年02月19日 10:31:55   作者：toobeloong  
这篇文章给大家详细介绍了electron 如何获取位置坐标信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

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

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获取坐标信息的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论