在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. 基于Influxdb对InfluxDBResultMapper的一点扩展

    理想很饱满,现实很骨感. 由于业务需要"灵活可配置"的功能需求,在使用java开发Influxdb查询功能的时候,遇到了一个问题,Measurement注解的名称有可能需要动态变化 ...

  2. 简单cookie入侵

    在当前网站,按下F12键进入开发者模式,在console控制台输入:document.cookie获取cookie值如: 复制你得到cookie值,你或通过每种方式获取Cookie,例如:当别人点击你 ...

  3. CSS3属性—— line-clamp控制文本行数

    说明: 限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为 ...

  4. Spring-Data-Jpa使用总结

    参考资源列表 官方文档:https://docs.spring.io/spring-data/jpa/docs/2.1.5.RELEASE/reference/html/ <Spring Dat ...

  5. Java动手动脑第四讲课堂作业

    动手动脑1 完全“手写代码实现”随机数生成 纯随机数发生器

  6. JS里面的铠甲合体!

    本标题党又回来了,最近在专心研究一些JS基础性的书籍,以期把原理都了解透彻,所以写文章的频率就降了下来.但是今天我必须要来写一下子,为什么呢,因为今天周五!先说明一下JS里面的拆箱与装箱指的是JS封箱 ...

  7. Python3数据分析与挖掘建模实战 ☝☝☝

    Python3数据分析与挖掘建模实战 Python数据分析简介 Python入门 运行:cmd下"python hello.py" 基本命令: 第三方库 安装 Windows中 p ...

  8. SpringCloud教程一:eureka注册中心(Finchley版)

    一.spring cloud简介 本阶段学习教程Spring Boot版本2.0.3.RELEASE,Spring Cloud版本为Finchley.RELEASE. Finchley版本的官方文档如 ...

  9. 实验吧之【你真的会PHP吗?】

    你真的会PHP吗? 首先刚进网页就是一个have fun  看了源码没有什么提示,也没有输入框,那就打开F12看看 有提示 6c525af4059b4fe7d8c33a.txt 访问 http://c ...

  10. php 加入 unless 语法

    1. php 的版本 :PHP 7.3.0-dev (cli) (built: Mar 18 2018 00:28:55) ( NTS ) 2. unless 语法结构: unless($cond){ ...