试过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.初始化urllet dataString = url.indexOf('?') === -1 ? '?' : '&'let callbackName = `jsonpCB_${Date.now()}`;url += `${dataString}callback=${callbackName}`if (data) {// 2.有请求参数,依次添加到urlfor (let k in data) {url += `&${k}=${data[k]}`}}let scriptNode = document.createElement('script');scriptNode.src = url;// 3. callbackwindow[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 => {...})
}