试过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 => {
...
})
}