vue 使用腾讯地图api

作者: black墨 | 来源:发表于2020-06-11 17:57 被阅读0次

最开始是使用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，不要大写