reactnative 获取定位_[RN] React Native 获取地理位置
import React, {Component} from 'react';
import {StyleSheet, Text, View}from 'react-native';
exportdefault classTestGeo extends Component {
state={
longitude:'',//經(jīng)度
latitude: '',//緯度
city: '',
district:'',
street:'',
position:'',//位置名稱
};
componentWillMount= () =>{this.getPositions();
};
getPositions= () =>{return new Promise(() =>{/** 獲取當(dāng)前位置信息*/navigator.geolocation.getCurrentPosition(
location=>{this.setState({
longitude: location.coords.longitude,//經(jīng)度
latitude: location.coords.latitude,//緯度
});//通過調(diào)用高德地圖逆地理接口，傳入經(jīng)緯度獲取位置信息
fetch(`http://restapi.amap.com/v3/geocode/regeo?key=97c933e33025b3843b40016900074704&location=${this.state.longitude},${this.state.latitude}&radius=1000&extensions=all&batch=false&roadlevel=0`, {
method: "POST",
headers: {"Content-Type": "application/x-www-form-urlencoded"},
body: ``
})
.then((response)=>response.json())
.then((jsonData)=>{//console.log(jsonData)
try{this.setState({
city: jsonData.regeocode.addressComponent.city,
district: jsonData.regeocode.addressComponent.district,
street: jsonData.regeocode.addressComponent.township,
position: jsonData.regeocode.formatted_address,
});
}catch(e) {
}
})
.catch((error) =>{
console.error(error);
});
},
error=>{
console.error(error);
}
);
})
}
render() {return(
經(jīng)度：{this.state.longitude}
緯度：{this.state.latitude}
城市：{this.state.city}
區(qū)域：{this.state.district}
街道：{this.state.street}
詳細(xì)位置：{this.state.position}
);
}
}const styles =StyleSheet.create({
container: {
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF',
},
instructions: {
textAlign:'center',
color:'#333333',
marginBottom:5,
},
});
總結(jié)
以上是生活随笔為你收集整理的reactnative 获取定位_[RN] React Native 获取地理位置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： katalon进行app测试_Katal
- 下一篇： 如何去掉DataTable中的重复行(新