在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报错的更多相关文章

  1. 解决Vue引入百度地图JSSDK:BMap is undefined 问题

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...

  2. vue引入百度地图api组件封装(根据地址定位)

    Map.vue <template> <div class="Map" :style="{ height: this.height+'px', widt ...

  3. Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置

    整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口:   <script type=& ...

  4. 单页面应用(spa)引入百度地图(Cannot read property 'dc' of undefined)

    难点介绍 引入百度地图的时候,用原生的获取不到dom节点. ( var mapEle = document.getElementById(testApi): var map = new BMap.Ma ...

  5. Echarts3.0 引入百度地图(转载)

    转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...

  6. react项目中引入百度地图打包报错问题

    一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...

  7. react 引入 百度地图API

    使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...

  8. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  9. Vue常见问题解决办法(一)ESLint检查报错

    vue.js报错“Do not use 'new' for side effects“(main.js里)解决办法 ESLint工具检查代码质量,main.js里的原代码是这样的: new Vue({ ...

随机推荐

  1. 如何写md格式的文档

    一.标题 标题其实和HTML中的h系列很像,想要设置为标题的文字前面加#来表示一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字, 示例: 效果如下: ...

  2. ionic3 浏览器端返回

    首屏component.ts文件中使用setupBrowserBackButtonBehavior() { // Register browser back button action(s) wind ...

  3. 安装高可用Hadoop生态 (三) 安装Hadoop

    3.    安装Hadoop 3.1. 解压程序 ※ 3台服务器分别执行 .tar.gz -C/opt/cloud/packages /opt/cloud/bin/hadoop /etc/hadoop ...

  4. TCP方式的传输

    TCP 客户端 先创建socket对象建立tcp客户端,明确服务端的地址和端口,必须与服务端对应,要不然对方收不到消息,就像快递填错了送货地址. Socket s = new Socket(" ...

  5. LRU算法实现,HashMap与LinkedHashMap源码的部分总结

    关于HashMap与LinkedHashMap源码的一些总结 JDK1.8之后的HashMap底层结构中,在数组(Node<K,V> table)长度大于64的时候且链表(依然是Node) ...

  6. 流包装器实现WebShell免杀

    说明: 本文首发自 https://www.secpulse.com/archives/73391.html ,转载请注明出处. 前言 本文是看PHP使用流包装器实现WebShell有感,权当做个笔记 ...

  7. [HNOI2007] 理想正方形 二维ST表

    题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...

  8. 4.Linux文件管理相关命令(上)

    1.复制命令cp cp - copy files and directories 拷贝 文件 和 目录 -r 递归复制,通常用来复制目录 -p 保持复制源文件的属性 -v 显示复制的过程 1. 将当前 ...

  9. ESP8266开发之旅 网络篇⑫ 域名服务——ESP8266mDNS库

    1. 前言     前面的博文中,无论是作为client端还是server端,它们之间的通信都是通过具体的IP地址来寻址.通过IP地址来寻址,本身就是一个弊端,用户怎么会去记住这些魔法数字呢?那么有没 ...

  10. .NET Core3.0 日志 logging

    多年的经验,日志记录是软件开发的重要组成部分.没有日志记录机制的系统不是完善的系统.在开发阶段可以通过debug附件进程进行交互调试,可以检测到一些问题,但是在上线之后,日志的记录起到至关重要的作用. ...