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

• h5开发使用 jsonp 调用地图API
  • 1、使用npm 安装 vue-jsonp
  • 2、 在main.js中引用
  • 3、调用地图的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,'腾讯地图')
})