uniapp使用腾讯的逆地址解析

遇到的问题:H5端调用腾讯地址接口提示跨域,而APP端正常显示。

解决方案:使用jsonp解决跨域问题。

第一步:下载jsonp

yarn add vue-jsonp

第二步:在跨域的地方引入并使用jsonp

import { jsonp } from 'vue-jsonp'
                           
uni.getLocation( {
    type: 'wgs84',
    success: function ( res ) {
        //由于在H5端的时候才会出现跨域所以只需要在H5端调用的时候使用json,而在app端使用的时候正常调用即可
        /*#ifdef  H5*/
        jsonp( 'http://apis.map.qq.com/ws/geocoder/v1', {
            location: '维度,经度',
            key: '你的腾讯地址的key',
            output: "jsonp"
        } ).then( res => {
            city.code = res.result.ad_info.adcode
            city.name = res.result.ad_info.district
        } )
        /*#endif*/
        /*#ifdef APP-PLUS*/
        uni.request( {
            url: 'https://apis.map.qq.com/ws/geocoder/v1/',
            data: {
                key: '你的腾讯地址的key',
                location: '维度,经度'
            },
            method: 'GET'
        } ).then( res => {
            city.code = res.data.result.ad_info.adcode
            city.name = res.data.result.ad_info.district
        } )
        /*#endif*/
    }
} )

腾讯的逆地址解析文档:WebService API | 腾讯位置服务 (qq.com)

  • 10
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp使用腾讯地图进行地址解析的方法如下所示: 1. 在onLoad函数中,获取地理位置授权。使用uni.getLocation函数获取当前位置的经纬度信息。 2. 创建QQMapWX对象,将申请的开发者密钥作为参数传入。 3. 调用QQMapWX对象的reverseGeocoder函数,传入当前位置的经纬度信息,进行地址解析。 4. 在成功回调函数中,可以得到解析后的地址信息,包括省市区等详细地址信息。 以下是示例代码: ```javascript onLoad() { uni.authorize({ scope: 'scope.userLocation', success: () => { let qqmapsdk = new QQMapWX({ key: '申请的开发者密钥' }); uni.getLocation({ type: 'gcj02', success: (res) => { qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude }, success: (res) => { console.log(res, 'rrr'); }, fail: (e) => { console.log(e, 'eee') } }) } }); }, fail: (err) => { if (err.errCode === 2) { this.$u.toast('请打开定位'); } else { this.$u.toast('获取不到您的定位,请确保能获取定位'); } } }); } ``` 在这个示例代码中,我们首先获取了地理位置授权。然后使用QQMapWX对象进行地址解析,将获得的经纬度信息传入。在成功回调函数中,我们可以通过res获取解析后的地址信息。 希望以上信息对您有帮助。如果还有其他问题,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [腾讯地图WebService地址解析接口](https://download.csdn.net/download/linhaiyun_ytdx/10933467)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uniapp使用腾讯地图根据地址解析经纬度](https://blog.csdn.net/wangxu__wangxu/article/details/115692888)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [uniapp地址解析(以腾讯地图为例)](https://blog.csdn.net/weixin_48745613/article/details/125223261)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值