vue3 引入腾讯地图解决请求接口https://apis.map.qq.com/ws/place/v1/suggestion跨域问题

试过npm i vue-jsonp不行，然后重新试了这个办法解决了

index.html 中引入

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=自己申请的key"></script>

?重写 jsonp，就不用在项目中安装 jsonp 了

export const jsonp = function (url, data) {
  return new Promise((resolve, reject) => {
    // 1.初始化url
    let dataString = url.indexOf('?') === -1 ? '?' : '&'
    let callbackName = `jsonpCB_${Date.now()}`;
    url += `${dataString}callback=${callbackName}`
    if (data) {
 
      // 2.有请求参数，依次添加到url
      for (let k in data) {
        url += `&${k}=${data[k]}`
      }
    }
 
    let scriptNode = document.createElement('script');
    scriptNode.src = url;
 
    // 3. callback
    window[callbackName] = (result) => {
      result ? resolve(result) : reject('没有返回数据');
      delete window[callbackName];
      document.body.removeChild(scriptNode);
    }
 
    // 4. 异常情况
    scriptNode.addEventListener('error', () => {
      reject('接口返回数据失败');
      delete window[callbackName];
      document.body.removeChild(scriptNode);
    }, false)
 
    // 5. 开始请求
    document.body.appendChild(scriptNode)
  })
}

使用：

// 引入重写的jsonp文件
import { jsonp } from '../../common/jsonp/jsonp.js'
 
// 使用
const onSearch = () => {
    let url = 'https://apis.map.qq.com/ws/...';
    jsonp(url, {
        key: 'key',
        output: 'jsonp',
        ...
    }).then(res => {
       ...
    })
}