vue引入百度地图 --BMap is not defined ,eslint BMap报错
在mounted初始化地图的时候,因为异步问题会导致BMap is not defined,也就是百度的api还没完全引入或者加载完成,就已经进行地图初始化了
解决方法:
1.创建一个map.js
export function MP(ak) {
return new Promise(function(resolve, reject) {
window.init = 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)
})
}
2.在 .vue文件中引用
import { MP } from '../map.js'
3.在mounted函数中进行初始化
this.$nextTick(() => {
const _this = this
MP(_this.ak).then(BMap => {
_this.initMap()
})
})
map.js 中 BMap未定义 会报错

解决方法:
在eslintrc.js中进行全局声明
globals: {
BMap: true
}

这样就完成啦~~
vue引入百度地图 --BMap is not defined ,eslint BMap报错的更多相关文章
- 解决Vue引入百度地图JSSDK:BMap is undefined 问题
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...
- vue引入百度地图api组件封装(根据地址定位)
Map.vue <template> <div class="Map" :style="{ height: this.height+'px', widt ...
- Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置
整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口: <script type=& ...
- 单页面应用(spa)引入百度地图(Cannot read property 'dc' of undefined)
难点介绍 引入百度地图的时候,用原生的获取不到dom节点. ( var mapEle = document.getElementById(testApi): var map = new BMap.Ma ...
- Echarts3.0 引入百度地图(转载)
转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...
- react项目中引入百度地图打包报错问题
一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...
- react 引入 百度地图API
使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...
- vue中百度地图API的调用
1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...
- Vue常见问题解决办法(一)ESLint检查报错
vue.js报错“Do not use 'new' for side effects“(main.js里)解决办法 ESLint工具检查代码质量,main.js里的原代码是这样的: new Vue({ ...
随机推荐
- 刷新:重新发现.NET与未来
微软在比尔·盖茨手中创立并崛起, 成为PC互联网时代的霸主,很多70,80后都有MVP Ediwang的体验: 当时的微软对我来说就是神的存在.因为我认识电脑到使用电脑的一切几乎都离不开这家伟大的公司 ...
- 虚拟机上安装centos8.0
一.准备宿主机 为了培训Hadoop生态的部署和调优技术,需要准备3台虚拟机部署Hadoop集群环境,能够保证HA,即主要服务没有单点故障,可执行基本功能,完成小内存模式的参数调整. 1.1.准备安装 ...
- JNI静态注册与动态注册详解
JNI注册,是指将java层方法(native关键字修饰的)和C层方法对应起来,以实现java层代码调用c层代码的目的.JNI注册分为静态注册和动态注册两种,静态注册是通过固定格式方法名进行关联,动态 ...
- 算法学习之剑指offer(十一)
一 题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. import java.util.*; ...
- php代码Xdebug调试使用笔记
0x01 Xdebug简介 Xdebug是一个开放源代码的PHP程序调试器 运行流程: 0x02 Xdebug配置 日志 xdebug.trace_output_dir: 日志追踪输出目录 xdeb ...
- Ubuntu16.04换源
换成国内最快的阿里云源 第一步:备份原来的源文件 cd /etc/apt/ 然后会显示下面的源文件sources.list 输入命令 sudo cp sources.list sources.list ...
- [BZOJ1076] 奖励关
Description 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物, 每次你都可以选择吃或者不吃(必须在抛出下一个宝物之前做出选择,且现在决定不吃的 ...
- SpringBootSecurity学习(26)前后端分离版之github单点登录
单点登录(SSO) 关于oauth2.0,最后我们再来学习一下单点登录.前面介绍过单点登录的定义,单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一. ...
- opencv::Sobel算子
卷积应用-图像边缘提取 卷积应用-图像边缘提取 边缘是什么 – 是像素值发生跃迁的地方,是图像的显著特征之一, 在图像特征提取.对象检测.模式识别等方面都有重要的作用. 如何捕捉/提取边缘 – 对图像 ...
- pytest2-收集与执行测试用例规则
pytest收集测试用例规则 测试文件以test_开头(以_test结尾也可以) 测试类以Test开头,并且不能带有 init 方法 测试函数以test_开头(以_test结尾也可以) pytest执 ...