react native 獲取地理位置
此版本是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 上獲取可能存在問題 官網介紹如下:
具體實現
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請求
記得開啟 位置訪問許可權
列印結果如下:
有點尷尬 好吧 給人家 大碗菜做了廣告
許可權不要忘記加
相關文章
- React Native 橋接原生 iOS 以及 Android 獲取 APP 版本號React Native橋接iOSAndroidAPP
- React Native圖片快取元件React Native快取元件
- React Native 跳轉到 APP 推送頁面並獲取推送狀態React NativeAPP
- js根據ip地址獲取城市地理位置JS
- 使用JS獲取當前地理位置方法彙總JS
- [React Native]react-native-scrollabReact Native
- Python獲取IP地址對應的地理位置資訊!Python
- React Native Icon方案:react-native-svgReact NativeSVG
- 獲取React元件的DOMReact元件
- React獲取元件例項React元件
- React Native 使用 react-native-webview 渲染 HTMLReact NativeWebViewHTML
- React Native轉web方案:react-native-webReact NativeWeb
- react-native配置react-native-image-crop-pickerReact
- React Native選擇器元件-react-native-slidepickerReact Native元件IDE
- 【譯】React如何獲取資料React
- React Native 上手React Native
- react-nativeReact
- Python獲取IP的地理位置:經緯度,國家,區域,城市Python
- 《React Native高效開發》之create-react-native-appReact NativeAPP
- React Native / React除錯技巧React Native除錯
- react native 包學不包會系列--認識react nativeReact Native
- reactnative獲取裝置真實ip地址和ip對映的地理位置React
- 獲取使用者精準地理位置資訊(百度地圖)地圖
- React Native 在使用者網路故障時自動調取快取React Native快取
- React Native 熱更新React Native
- 詳解 React NativeReact Native
- Redux for react native 指南ReduxReact Native
- React-Native ‘WKWebView` has no propType for native propReactWebView
- react/react-native效能優化React優化
- [譯] Airbnb 在 React Native 上下的賭注(四):React Native 退役AIReact Native
- Java根據地理位置獲取經緯度(呼叫百度地圖API)Java地圖API
- React Native --踩坑記 之 建立指定 React Native版本的專案React Native
- React Native 的未來與React HooksReact NativeHook
- React Native Router Navigations(3)React NativeNavigation
- React Native 環境搭建React Native
- React Native 初體驗React Native
- React Native 0.59 新特性React Native
- React Native 整合code pushReact Native