electron獲取位置坐標(biāo)信息的方法小結(jié)

更新時(shí)間：2024年02月19日 10:31:55 作者：toobeloong

這篇文章給大家詳細(xì)介紹了electron 如何獲取位置坐標(biāo)信息,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

前端獲取位置坐標(biāo)信息，有以下幾種方法：

1.通過(guò)原生方法獲取

優(yōu)點(diǎn)：自定隨意編寫邏輯

缺點(diǎn)：需要授權(quán)，或者某些場(chǎng)景沒辦法獲取

 
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('位置服務(wù)被拒絕', e.message);
        break;
      case e.POSITION_UNAVAILABLE:
        logger.info('暫時(shí)獲取不到位置信息', e.message);
        break;
      case e.TIMEOUT:
        logger.info('獲取信息超時(shí)', e.message);
        break;
      default:
        logger.info('未知錯(cuò)誤', e.message);
        break;
    }
};
 
 
function setLocation () {
const options = {
      //是否使用高精度設(shè)備，如GPS。默認(rèn)是true
      enableHighAccuracy: true,
      //超時(shí)時(shí)間，單位毫秒，默認(rèn)為0
      timeout: 5000,
      //使用設(shè)置時(shí)間內(nèi)的緩存數(shù)據(jù)，單位毫秒
      //默認(rèn)為0，即始終請(qǐng)求新數(shù)據(jù)
      //如設(shè)為Infinity，則始終使用緩存數(shù)據(jù)
      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.直接使用第三方服務(wù)

例如：百度地圖等一些線上的服務(wù)商，只要你自己在使用過(guò)程當(dāng)中沒什么限制。

以百度為例，如果是直接自己創(chuàng)建ak，通過(guò)

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

去調(diào)用的話，精度不高，只去到所在城市的中心點(diǎn)，所以基本沒啥用，想要提高精度，增加自己的投入就好。

還有一種，就是直接用map的api:

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

暫時(shí)來(lái)說(shuō)，還沒遇到使用上的限制，直接通過(guò)axios去調(diào)用即可（ajax等其他方式調(diào)用也行，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;
      // 轉(zhuǎn)換成 gcj02 坐標(biāo)
      const gcj02 = coordtransform.bd09togcj02(gcj02Lng, gcj02Lat);
      // 再轉(zhuǎn)換為 wgs84 坐標(biāo)
      const wgs84 = coordtransform.gcj02towgs84(gcj02[0], gcj02[1]);
      console.debug('db09 坐標(biāo)：', response.data.rgc.result.location.lng, response.data.rgc.result.location.lat);
      console.debug('gcj02 坐標(biāo)：', gcj02);
      console.debug('WGS84 坐標(biāo)：', wgs84);
      });
    });
}

上面的方法使用到了coordtransform進(jìn)行坐標(biāo)轉(zhuǎn)換，當(dāng)你直接調(diào)用接口獲取數(shù)據(jù)，在使用的時(shí)候發(fā)現(xiàn)坐標(biāo)不是很準(zhǔn)確，多半是需要轉(zhuǎn)換一下之后再使用。

npm安裝一下就好

npm i coordtransform

關(guān)于electron應(yīng)用獲取坐標(biāo)數(shù)據(jù)，navigator的話，需要https或者是攜帶證書，搞起來(lái)比較麻煩，直接使用第三方服務(wù)就比較簡(jiǎn)單了，上面的方法都是現(xiàn)在常用的獲取坐標(biāo)的方式，可以參考一下，有問(wèn)題大家不妨討論討論。

以上就是electron獲取位置坐標(biāo)信息的方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于electron獲取坐標(biāo)信息的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: