vue调用百度地图api时Bmap没有定义的解决办法
2017-05-24 16:12
267 查看
前段时间项目需要用到百度地图,直接首页里引入就用了
编译完一运行,结果报错:Bmap is not defined
![](https://img-blog.csdn.net/20170524161735827?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMzU1MTU3Nzg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
于是百度了下各位大神前辈的解决方法,有的说在webpack配置里module.exports中加个externals:
在你的百度地图页面中调用(ak 就是你的密钥)
同样的,挂载其他外部类库有问题时也可以尝试这样做。
希望对你有用~
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
编译完一运行,结果报错:Bmap is not defined
于是百度了下各位大神前辈的解决方法,有的说在webpack配置里module.exports中加个externals:
module.exports = { entry: './src/main.js', externals:{ 'BMap':'BMap' }, ... }然而依然报错。。。后来我发现一个前辈介绍了一个挺实用的方法,跟百度api官网里的异步加载很像,完美的解决了这个问题。在vue论坛里发现有朋友遇到类似的挂载类库出错的问题,我把这个方法分享给他后也轻松解决了,所以我觉得有必要分享给更多人。废话不多说,首先跟入口js一样,新建一个map.js
export function MP(ak) { return new Promise(function (resolve, reject) { window.onload = function () { resolve(BMap) } var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init"; script.onerror = reject; document.head.appendChild(script); }) }
在你的百度地图页面中调用(ak 就是你的密钥)
import {MP} from './map.js'
mounted(){ this.$nextTick(function(){ var _this = this; MP(_this.ak).then(BMap => { //在此调用api })
同样的,挂载其他外部类库有问题时也可以尝试这样做。
希望对你有用~
相关文章推荐
- ios 4.3 中 viewDidAppear没有被调用的解决办法
- iOS8设置别名后报错,提示没有定义的解决办法
- linux下用g++编译c程序:xx没有定义解决办法
- 关于c调用lua 对‘luaL_newstate()’未定义的引用的问题解决办法
- Vue项目在 IE 下警告“ReferenceError:‘Promise’未定义” 的解决办法
- c#程序在没有安装SQL2000机器上调用DTS包出错的解决办法【整理】
- 【QTP】使用自定义Class类出现“类没有被定义”的解决办法小结
- vs2015中c++中multiset容器定义对象时参数列表中显式调用greater无法被识别的解决办法
- ios 4.3 中 viewDidAppear没有被调用的解决办法
- 关于Android中调用了post方法后貌似没有执行run方法的解释及解决办法
- swift 中定义的方法只有一个参数没有外部参数名的解决办法
- 调用图片或视频文件时没有缩略图显示的原因和解决办法
- vue请求数据,build文件没有dev-server.js解决办法
- 调用可能未定义的方法 attachVideo (通过 static 类型 flash.media:Video 引用)解决办法
- 关于c调用lua 对‘luaL_newstate()’未定义的引用的问题解决办法
- 关于Android中调用了post方法后貌似没有执行run方法的解释及解决办法
- 关于 WebBrowser调用百度地图API 鼠标滚轮缩放地图级别失灵的解决办法
- vue.js 使用v-if v-else发现没有执行解决办法
- dsoframer 注册控件后在某些机器调用部分函数时提示"没有注册接口"的解决办法
- java反射机制(reflect)解决调用一个类中多个规律命名的方法的办法