vue 使用 腾讯地图api
2020-06-11 本文已影响0人
black墨
最开始是使用axios进行调用腾讯地图api(后面简称api),会出现已拦截跨源请求:同源策略禁止读取位于 xxxx的远程资源。CORS 头缺少 'Access-Control-Allow,这是不允许跨域访问,只能使用 vue-jsonp 组件了。
npm 包
https://www.npmjs.com/package/vue-jsonp
npm i vue-jsonp --sava
main.js中
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
vue文件 中
this.$jsonp(`https://apis.map.qq.com/ws/geocoder/v1`, {
location: '39.984154,116.307490',
key: 'xxxx', // 你的key
get_poi: 1,
output: 'jsonp'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
如果控制台出现了
SyntaxError: unexpected token: ':'
这个提示,请检查output是不是漏传了 或者传了JSONP, 不要大写
图片.png
好了,就这样,最后一句话是凑字数的,不用看