reactnative 获取定位_【React Native】定位获取经纬度，当前城市等地址信息
最近做React Native時(shí)，需要用到城市定位的功能，React Native中文網(wǎng)的定位部分中也提供了相應(yīng)的方法。主要用到的方法有：
這里只需要獲取到經(jīng)緯度，城市等信息，持續(xù)監(jiān)聽(tīng)的函數(shù)就不需要了。這里使用 getCurrentPosition 方法獲取當(dāng)前位置信息，再用逆地址解析服務(wù)完成地址獲取。
獲取經(jīng)緯度城市地址信息完整步驟如下：
1. 導(dǎo)入Geolocation
import Geolocation from 'Geolocation';
2.調(diào)用 getCurrentPosition 方法得到經(jīng)緯度
這里將這個(gè)操作封裝成一個(gè)方法，并返回Promise。
//獲取經(jīng)緯度的方法 Longitude Latitude
let getLongitudeAndLatitude = () => {
//獲取位置再得到城市先后順序，通過(guò)Promise完成
return new Promise((resolve, reject) => {
Geolocation.getCurrentPosition(
location => {
//可以獲取到的數(shù)據(jù)
var result = "速度：" + location.coords.speed +
"\n經(jīng)度：" + location.coords.longitude +
"\n緯度：" + location.coords.latitude +
"\n準(zhǔn)確度：" + location.coords.accuracy +
"\n行進(jìn)方向：" + location.coords.heading +
"\n海拔：" + location.coords.altitude +
"\n海拔準(zhǔn)確度：" + location.coords.altitudeAccuracy +
"\n時(shí)間戳：" + location.timestamp;
// ToastAndroid.show("UTIl" + location.coords.longitude, ToastAndroid.SHORT);
resolve([location.coords.longitude, location.coords.latitude]);
},
error => {
// Alert.alert("獲取位置失敗：" + error, "")
reject(error);
}
);
})
}
經(jīng)緯度，海拔等信息的獲取方式就是以 location.coords.longitude,location.coords.latitude ，location.coords.altitudeAccuracy的方式得到。
如果只是需要獲取經(jīng)緯度，這里已經(jīng)完成。可以通過(guò)setState或者賦值給全局變量等方式記錄。
為了進(jìn)一步獲取城市，這里Promise將經(jīng)緯度組合成一個(gè)數(shù)組resolve傳遞出去。
3.使用逆地址解析服務(wù)將經(jīng)緯度解析成地址信息
這里可以通過(guò)百度地圖或者騰訊位置服務(wù)的逆地址解析服務(wù)來(lái)完成，流程如下：
注冊(cè)成為開(kāi)發(fā)者
創(chuàng)建自己的應(yīng)用
然后獲取key或認(rèn)證
加上經(jīng)緯度等參數(shù)來(lái)發(fā)起請(qǐng)求
例如百度地圖的請(qǐng)求方式：
https://api.map.baidu.com/geocoder/v2/?output=json&ak=9a9a9a9a9a9a9a9a9a9a9a9a9a&location=39.206526,116.909158
(9a9a…就是你申請(qǐng)的ak認(rèn)證，對(duì)應(yīng)在你創(chuàng)建的應(yīng)用中)
通過(guò)Postman 測(cè)試請(qǐng)求的效果如下：
這里需要將 location 經(jīng)緯度參數(shù)替換為自己通過(guò) getCurrentPosition 方法獲取到的經(jīng)緯度。也就是先獲取到經(jīng)緯度，再通過(guò)逆地址解析獲取到城市等地址信息。將這個(gè)操作再封裝成一個(gè)方法：
getCityLocation() {
return new Promise((resolve, reject) => {
getLongitudeAndLatitude()
//獲取經(jīng)緯度的方法返回的是經(jīng)緯度組成的數(shù)組
.then((locationArr) => {
// Alert.alert("", "" + locationArr[1]);
let longitude = locationArr[0];
let latitude = locationArr[1];
this.getNetData(BaiduMap_URL + latitude + "," + longitude)
.then((data) => {
if (data.status == 0) {
resolve(data);
} else {
reject(ErrorDeal.getError(data.code));
}
}).catch((data) => {
reject(ErrorDeal.getError(data.code));
})
}).catch((data) => {
reject(ErrorDeal.getError(data.code));
})
})
}
getLongitudeAndLatitude 就是上面的獲取經(jīng)緯度的方法，this.getNetData是一個(gè)fetch 請(qǐng)求的封裝。拼接請(qǐng)求 Url，fetch請(qǐng)求，此時(shí) resolve 的數(shù)據(jù)就是 Postman 解析的 json 數(shù)據(jù)了。
//獲取網(wǎng)絡(luò)數(shù)據(jù)
getNetData(url) {
return new Promise((resolve, reject) => {
fetch(url).then((response) => response.json())
.then((responseData) => {
resolve(responseData);
})
.catch((error) => {
reject(ErrorDeal.getError(NetWork_Error))
})
.done()
})
}
4.獲取信息并處理
上面 getCityLocation 返回的 Promise 中 resolve 傳遞的 data 就是 json 數(shù)據(jù)了，就已經(jīng)可以因自身需求進(jìn)行數(shù)據(jù)處理顯示的操作了。
this.getCityLocation()
.then((data) => {
// Alert.alert("位置？", "" + JSON.stringify(data));
this._confirmCity(data);
})
.catch((error) => {
//ToastAndroid.show("失敗" + JSON.stringify(error), ToastAndroid.SHORT);
});
調(diào)用 getCityLocation，再 then 方法處理處理 data ，此時(shí)的 data 是一個(gè) json 對(duì)象。
例如我的處理是調(diào)用 _confirmCity 方法彈出一個(gè)城市切換的確認(rèn)框：
//彈出定位框
_confirmCity(data) {
let address = data.result.addressComponent;
if (address!="") {
Alert.alert("城市定位", "\n當(dāng)前城市為" + address.province + address.city + "\n \n 是否設(shè)為當(dāng)前城市？\n",
[
{
text: "設(shè)為當(dāng)前城市", onPress: () => {
this.setCurrentCity(address.city)
}
},
{text: "取消"}
]
)
}
}
效果圖：
這里就已經(jīng)完成了經(jīng)緯度的獲取，城市地址信息的獲取功能。
總結(jié)
以上是生活随笔為你收集整理的reactnative 获取定位_【React Native】定位获取经纬度，当前城市等地址信息的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： easycode不推荐使用_为什么?my
- 下一篇： 不使用自带函数求区域的周长_Excel表