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

2019-11-19 13:07:35

字體：大中小

來源：轉載

供稿：網友

react native 官網介紹了這個 api Geolocation 但是這個api只能返回經緯度所以要把經緯度通過逆地理位置轉義 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通過這個阿里的開放接口

在 react native 中，我們所用的是react native 自帶的api定位功能，無需引入第三方js。

react native 定位是通過Geolocation這個模塊來實現的。想了解更多關于Geolocation的知識請點擊下面 Geolocation自行了解，這里我們主要將他的幾個方法。

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)

第一個方法是獲取第一次定位時的位置信息，第一個為成功時的回掉函數，還有error時的回掉，第三個是傳狀態的。
在請求成功函數中有以下屬性：

經度 : coords.longitude
緯度 : coords.latitude
準確度 : coords.accuracy
海拔 : coords.altitude
海拔準確度 : coords.altitudeAcuracy
行進方向 : coords.heading
地面速度 : coords.speed
時間戳 : new Date(position.timestamp)

在請求失敗函數中有4種情況（err.code狀態值）：

1為用戶拒絕定位請問
2暫時獲取不到位置信息
3為請求超時
4未知錯誤

第三個options是可選參數，屬性如下：

enableHighAccuracy――指示瀏覽器獲取高精度的位置，默認為false。當開啟后，可能沒有任何影響，也可能使瀏覽器花費更長的時間獲取更精確的位置數據。

timeout――指定獲取地理位置的超時時間，默認不限時。單位為毫秒。

maximumAge――最長有效期，在重復獲取地理位置時，此參數指定多久再次獲取位置。默認為0，表示瀏覽器需要立刻重新計算位置。

static watchPosition(success, error?, options?)

是多次改變了位置信息時才會觸發，一般觸發的可能性可能用戶多次刷新數據，如一個人行車到其他城市，這時如果設置一個監聽函數，只要watchid不一樣，就會不斷的觸發

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

對了，要啟動react native 的定位功能的話，如果你是android 用戶，你需要先在AndroidManifest.xml中加入以下權限

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

具體實現

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請求

記得開啟位置訪問權限

打印結果如下：