快捷導(dǎo)航

react native 獲取地理位置的方法示例

更新時(shí)間：2018年08月28日 14:24:36 作者：JsLin_

這篇文章主要介紹了react native 獲取地理位置的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

react native 官網(wǎng)介紹了這個(gè) api Geolocation 但是這個(gè)api只能返回經(jīng)緯度所以要把經(jīng)緯度通過(guò)逆地理位置轉(zhuǎn)義 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通過(guò)這個(gè)阿里的開(kāi)放接口

在 react native 中，我們所用的是react native 自帶的api定位功能，無(wú)需引入第三方j(luò)s。

react native 定位是通過(guò)Geolocation這個(gè)模塊來(lái)實(shí)現(xiàn)的。想了解更多關(guān)于Geolocation的知識(shí)請(qǐng)點(diǎn)擊下面 Geolocation自行了解，這里我們主要將他的幾個(gè)方法。

static getCurrentPosition(geo_success, geo_error?, geo_options?)
Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) On Android, this can return almost immediately if the location is cached or request an update, which might take a while.

static watchPosition(success, error?, options?)
Invokes the success callback whenever the location changes. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m)

static clearWatch(watchID)

第一個(gè)方法是獲取第一次定位時(shí)的位置信息，第一個(gè)為成功時(shí)的回掉函數(shù)，還有error時(shí)的回掉，第三個(gè)是傳狀態(tài)的。
在請(qǐng)求成功函數(shù)中有以下屬性：

經(jīng)度 : coords.longitude
緯度 : coords.latitude
準(zhǔn)確度 : coords.accuracy
海拔 : coords.altitude
海拔準(zhǔn)確度 : coords.altitudeAcuracy
行進(jìn)方向 : coords.heading
地面速度 : coords.speed
時(shí)間戳 : new Date(position.timestamp)

在請(qǐng)求失敗函數(shù)中有4種情況（err.code狀態(tài)值）：

1為用戶拒絕定位請(qǐng)問(wèn)
2暫時(shí)獲取不到位置信息
3為請(qǐng)求超時(shí)
4未知錯(cuò)誤

第三個(gè)options是可選參數(shù)，屬性如下：

enableHighAccuracy——指示瀏覽器獲取高精度的位置，默認(rèn)為false。當(dāng)開(kāi)啟后，可能沒(méi)有任何影響，也可能使瀏覽器花費(fèi)更長(zhǎng)的時(shí)間獲取更精確的位置數(shù)據(jù)。

timeout——指定獲取地理位置的超時(shí)時(shí)間，默認(rèn)不限時(shí)。單位為毫秒。

maximumAge——最長(zhǎng)有效期，在重復(fù)獲取地理位置時(shí)，此參數(shù)指定多久再次獲取位置。默認(rèn)為0，表示瀏覽器需要立刻重新計(jì)算位置。

static watchPosition(success, error?, options?)

是多次改變了位置信息時(shí)才會(huì)觸發(fā)，一般觸發(fā)的可能性可能用戶多次刷新數(shù)據(jù)，如一個(gè)人行車(chē)到其他城市，這時(shí)如果設(shè)置一個(gè)監(jiān)聽(tīng)函數(shù)，只要watchid不一樣，就會(huì)不斷的觸發(fā)

由于可能會(huì)出現(xiàn)緩存的情況，所以Geolocation 為我們提供了一個(gè)可以清除緩存的方法watchPosition（），改方法是用于上一次的定位信息進(jìn)行清除的。

對(duì)了，要啟動(dòng)react native 的定位功能的話，如果你是android 用戶，你需要先在AndroidManifest.xml中加入以下權(quán)限

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

具體實(shí)現(xiàn)

import Geolocation from 'Geolocation';

  ......

 getlocal() {
  Geolocation.getCurrentPosition(
   val => {
    let ValInfo =
     '速度：' +
     val.coords.speed +
     '\n經(jīng)度：' +
     val.coords.longitude +
     '\n緯度：' +
     val.coords.latitude +
     '\n準(zhǔn)確度：' +
     val.coords.accuracy +
     '\n行進(jìn)方向：' +
     val.coords.heading +
     '\n海拔：' +
     val.coords.altitude +
     '\n海拔準(zhǔn)確度：' +
     val.coords.altitudeAccuracy +
     '\n時(shí)間戳：' +
     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 = '獲取坐標(biāo)失敗：' + val;
    this.setState({ LocalPosition: ValInfo }); //如果為空的話 沒(méi)允許開(kāi)啟定位服務(wù)

   },
  );
 }

這里的 GET_GPRS 是自己封裝的 fech請(qǐng)求

記得開(kāi)啟位置訪問(wèn)權(quán)限

打印結(jié)果如下：