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({ ...
随机推荐
- 如何在linux下编写一个简单的Shell脚本程序
在了解了linux终端和其搭配的基本Shell(默认为bash)的基础下,我们就可以在终端中用vi/vim编辑器编写一个shell的脚本程序了 Shell既为一种命令解释解释工具,又是一种脚本编程语言 ...
- Golang的反射reflect深入理解和示例
编程语言中反射的概念 在计算机科学领域,反射是指一类应用,它们能够自描述和自控制.也就是说,这类应用通过采用某种机制来实现对自己行为的描述(self-representation)和监测(examin ...
- Butter Knife
Butter Knife,专门为Android View设计的绑定注解,专业解决各种findViewById. 简介 对一个成员变量使用@BindView注解,并传入一个View ID, Butter ...
- Kubernetes的RBAC是啥
RBAC: Role-Based Access Control,基于角色的权限控制,有以下三种角色 Role:角色,它其实是一组规则,定义了一组API对象的操作权限 Subject:被作用者,可以是人 ...
- Python:numpy中shape和reshape的用法
>>> w=np.zeros((5,6))>>> warray([[ 0., 0., 0., 0., 0., 0.], [ 0., 0., ...
- Flask的路由解读以及其配置
from flask import Flask app =Flask(__name__) 一.配置 配置一共有四中方式 方法一: 只能设置以下两种属性 app.debug=True app.secre ...
- Hibernate HQL注入与防御(ctf实例)
遇到一个hql注入ctf题 这里总结下java中Hibernate HQL的注入问题. 0x01 关于HQL注入 Hibernate是一种ORM框架,用来映射与tables相关的类定义(代码) ...
- node.js当中的http模块与url模块的简单介绍
一.http模块的简单介绍 node.js当中的http内置模块可以用于创建http服务器与http客户端. 1.引包 const http = require('http'); 2.创建http服务 ...
- 在博客中增加自己的live2d纸片人模型方法
目录 在博客中增加自己的live2d纸片人模型 准备工具 使用步骤 附件 在博客中增加自己的live2d纸片人模型 准备工具 github仓库:存放live2d模型和json文件 如果你的博客支持本地 ...
- libevent::实现的低级 socket
LibEvent 实现的低级 ROT13 例子 #include <cstdio> #include <netinet/in.h> #include <sys/socke ...