700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > reactnative 获取定位_[RN] React Native 获取地理位置

reactnative 获取定位_[RN] React Native 获取地理位置

时间:2019-05-20 21:57:32

相关推荐

reactnative 获取定位_[RN] React Native 获取地理位置

import React, {Component} from 'react';

import {StyleSheet, Text, View}from 'react-native';

exportdefault classTestGeo extends Component {

state={

longitude:'',//经度

latitude: '',//纬度

city: '',

district:'',

street:'',

position:'',//位置名称

};

componentWillMount= () =>{this.getPositions();

};

getPositions= () =>{return new Promise(() =>{/** 获取当前位置信息*/navigator.geolocation.getCurrentPosition(

location=>{this.setState({

longitude: location.coords.longitude,//经度

latitude: location.coords.latitude,//纬度

});//通过调用高德地图逆地理接口,传入经纬度获取位置信息

fetch(`/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(

经度:{this.state.longitude}

纬度:{this.state.latitude}

城市:{this.state.city}

区域:{this.state.district}

街道:{this.state.street}

详细位置:{this.state.position}

);

}

}const styles =StyleSheet.create({

container: {

flex:1,

justifyContent:'center',

alignItems:'center',

backgroundColor:'#F5FCFF',

},

instructions: {

textAlign:'center',

color:'#333333',

marginBottom:5,

},

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。