最近项目中需要引入百度地图api的js文件，刚开始想这还不简单，直接通过script引入，结果发现不行
vue不支持下面的引入方式
<script src="http://api.map.baidu.com/getscript?v=2.0&ak=yourak&services=&t=20190123111209"></script>
<script>
export default{
</script>
vue中引入js需要通过import，因此考虑写一个动态加载js的功能，可以结合Promise，js加载成功，调用resolve，js加载失败，调用reject
loadJs，传入要加载的js地址
function loadJs(src) {
return new Promise((resolve,reject)=>{
let script = document.createElement('script')
script.type = "text/javascript"
script.onload = ()=>{
resolve()
script.onerror = ()=>{
reject()
script.src= src
document.getElementsByTagName('body')[0].appendChild(script)
export default loadJs
vue组件中调用
<script>
import loadJs from '../../utils/base/loadJs'
export default {
name : 'Test',
mounted(){
loadJs('http://api.map.baidu.com/getscript?v=2.0&ak=yourak&services=&t=20190123111209').then(()=>{
var map = new BMap.Map("allmap");
</script>
就是这么简单啊~~
如果是引入百度地图api，注意，api地址为
http://api.map.baidu.com/getscript?v=2.0&ak=yourak&services=&t=20190123111209
不要使用默认的api地址，因为这个地址返回的并不是真正的js内容，而是document.write(...)，要使用document.write()中的js地址才可以
http://api.map.baidu.com/api?v=2.0&ak=您的密钥
-END-
