react native 獲取地理位置

weixin_33866037發表於2018-08-27

此版本是0.47
react native 官網介紹了這個 api Geolocation 但是這個api只能返回 經緯度 所以要把經緯度 通過逆地理位置轉義 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通過這個阿里的開放介面
RN 0.55以下版本需要匯入 不包括0.55

import Geolocation from 'Geolocation';

0.55 以及0.55以上 Android 上獲取可能存在問題 官網介紹如下:


4731495-dca870c9e261dbeb.png
image.png

具體實現

import Geolocation from 'Geolocation';

    ......

  getlocal() {
    Geolocation.getCurrentPosition(
      val => {
        let ValInfo =
          '速度:' +
          val.coords.speed +
          '\n經度:' +
          val.coords.longitude +
          '\n緯度:' +
          val.coords.latitude +
          '\n準確度:' +
          val.coords.accuracy +
          '\n行進方向:' +
          val.coords.heading +
          '\n海拔:' +
          val.coords.altitude +
          '\n海拔準確度:' +
          val.coords.altitudeAccuracy +
          '\n時間戳:' +
          val.timestamp;
        this.setState({ LocalPosition: ValInfo });
        console.log("列印地理位置:"+`${val.coords.longitude},${val.coords.latitude}`)
        GET_GPRS({
          "l":`${val.coords.latitude},${val.coords.longitude}`,
          "type":111,
        }).then(res => {
          console.log(JSON.stringify(res))
        })
      },
      val => {
        let ValInfo = '獲取座標失敗:' + val;
        this.setState({ LocalPosition: ValInfo }); //如果為空的話 沒允許開啟定位服務

      },
    );
  }

這裡的 GET_GPRS 是自己封裝的 fech請求
記得開啟 位置訪問許可權
列印結果如下:

4731495-ee3d688a785a4a0f.png
image.png

有點尷尬 好吧 給人家 大碗菜做了廣告

許可權不要忘記加


4731495-64183a9ee83bbe38.png
image.png

相關文章