vue 随手记

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

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

上一篇 下一篇

猜你喜欢

热点阅读