第一步:安装 react-native-xml2js(https://www.npmjs.com/package/react-native-xml2js) 这是解析xml文本的,因为高德地图到时候会返回xml内容
yarn add react-native-xml2js
第二步:引入 react-native-xml2js
const parseString = require('react-native-xml2js').parseString;
第三步:使用
componentDidMount() {
//高德
let url = 'https://restapi.amap.com/v3/geocode/regeo?output=xml&location=113.35674215767668,23.13554746316666&key=高德上申请的key&radius=1000&extensions=all'
fetch(url)
.then((response) => response.text())
.then((responseText) => {
let xmlContent = responseText
parseString(xmlContent, (err, result) => {
let res = JSON.parse(JSON.stringify(result.response))
console.warn('xml解析内容',res.regeocode[0].formatted_address[0]);
let str = res.regeocode[0].formatted_address[0] //这个就是当前最近的一个中文地点
this.setState({
localAddress:str
})
});
}).done();
// 百度
let url = `https://restapi.amap.com/v3/geocode/regeo?output=xml&location=${curLon},${curLat}&key=a2a0942a9bcb59eb7bd0f0bb81a9817b&radius=1000&extensions=all`
fetch(url)
.then((response) => response.text())
.then((responseText) => {
let xmlContent = responseText
parseString(xmlContent, (err, result) => {
let res = JSON.parse(JSON.stringify(result.response))
console.warn('xml解析内容',res.regeocode[0].formatted_address[0]);
let str = res.regeocode[0].formatted_address[0]
this.setState({
localAddress:str,
isLoading:false,
isSuccess:true
})
});
}).done();
}
当地点文字过长时用…代替 , ellipsizeMode省略号
<Text style={{
fontSize:18,
color:"#fff",
textAlign:'center',
justifyContent:'center',
marginLeft:15,width:'80%'}}
numberOfLines={1}
ellipsizeMode="tail">
{this.state.localAddress}
</Text>
网友评论