vue 使用 腾讯地图api

最开始是使用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

好了，就这样，最后一句话是凑字数的，不用看