前端获取位置坐标信息,有以下几种方法:
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获取坐标信息的资料请关注插件窝其它相关文章!