美文网首页
react-native 逆定理编码(高德、百度)

react-native 逆定理编码(高德、百度)

作者: 物联白菜 | 来源:发表于2020-12-03 20:13 被阅读0次

第一步:安装 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>

相关文章

网友评论

      本文标题:react-native 逆定理编码(高德、百度)

      本文链接:https://www.haomeiwen.com/subject/yprvwktx.html