遇到的问题: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)