Uniapp 之 h5 使用 jsonp 跨域调用地图 API

文章目录[隐藏]

h5开发使用 jsonp 调用地图API

用 uniapp开发h5时，请求讯地图的api的时候总是会跨域报错，解决方法如下：

利用 jsonp 解决跨域问题

h5开发使用 jsonp 调用地图API

1、使用npm 安装 vue-jsonp

npm install vue-jsonp --save

下载成功之后，node_modules目录下会有vue-jsonp文件

2、在main.js中引用

import { VueJsonp } from 'vue-jsonp'

Vue.use(vueJsonp)

3、调用地图的API

this.$jsonp(
    "https://api.map.baidu.com/reverse_geocoding/v3/?ak=lgB5fqzTUODMGllXL0Wk88888888&location=0,0&output=json&callback=showLocation"
).then(res => {
    console.log(res,'百度')
})  

this.$jsonp(
    "https://apis.map.qq.com/ws/geocoder/v1/?key=AAAA-AAAA-AAAAA-AAAA-AAAA-AAAA&location=0,0&output=jsonp"
).then(res => {
    console.log(res,'腾讯地图')
})

声明： 本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。