'BMap' is not defined 导致百度地图无法正常显示的解决方案，亲测有效！

友情提示：在正常安装导入后调用百度地图，页面仍无法正常显示出地图画面的前提下，请继续尝试下面两种解决方案！终端接入百度地图的方法

方法一：异步加载（Vue项目）

第一步：注释之前在index.html中引入的百度地图（如没有，请忽略，继续往下看！）

第二步：新建一个 map.js 文件

跟入口 js（main.js）一样，同一级目录新建一个 map.js （ak 就是你的密钥）

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);  })  }

注意：此处 src 末尾的 callback 参数必须上下保持一致，一般值为（ init, initialize ,onload ）

第三步：在需要显示的页面中调用：

import {MP} from '@/map.js'
export default {data () {return {ak:', // 这里就是百度地图密钥（建议自己申请）}},mounted(){...this.$nextTick(function(){let that = this;MP(that.ak).then(BMap=>{// 百度地图API功能that.baiduMap();...})})},
}

方法二：webpack 配置（Vue项目）

第一步：配置webpack 文件

配置 webpack 配置文件（webpack.base.conf.js）的module.exports中加个externals：

module.exports = {context: path.resolve(__dirname, '../'),entry: { app: './src/main.js' },//百度地图配置20180518externals: {"BMap": "BMap"},
...
}

第二步：调用

<script>
export default {data() {return {};},mounted() {this.baiduMap();},methods: {baiduMap() {let map = new BMap.Map("allmap",{enableMapClick:true}); // 创建地图实例let point = new BMap.Point(114.171711, 22.306414); // 创建点坐标map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addControl(new BMap.NavigationControl()); //添加缩放平移控件map.addControl(new BMap.ScaleControl()); //添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加缩略图控件map.addControl(new BMap.MapTypeControl()); //添加地图类型控件//map.setMapStyle({ style: 'midnight' }) //地图风格//设置标注的图标let icon = new BMap.Icon("./static/img/map.png", new BMap.Size(100, 100));//设置标注的经纬度let marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中let content = "<table>";content = content + "<tr><td> 公司名称：XXX</td></tr>";content = content + "<tr><td> 公司地址: XXX</td></tr>";content = content + "<tr><td> 公司电话: XXX</td></tr>";content += "</table>";//提示信息let infoWindow = new BMap.InfoWindow(content);// 鼠标移上标注点要发生的事marker.addEventListener("mouseover", function() {this.openInfoWindow(infoWindow);});// 鼠标移开标注点要发生的事marker.addEventListener("mouseout", function() {//this.closeInfoWindow(infoWindow)});...}}
};
</script>

温馨提示：使用BMap的时候不需要import了，import反而会报错：BMap is not defined，注意一定要给bmap的div设置高度，否则会看不见！

'BMap' is not defined 导致百度地图无法正常显示的解决方案，亲测有效！相关推荐

百度地图多标注显示以及自定义图标
** 百度地图多标注显示以及自定义图标 ** 效果图: HTML部分 <style>*{margin:0px;padding:0px} html{font-size: 100%;} bod ...
百度地图分不同色块显示某个城市的行政区划，并添加城市（区）名
百度地图分不同色块显示某个城市的行政区划,并添加城市(区)名,包括在不同的zoom缩放范围下标签的显示隐藏效果如下: 先拉代码跑一跑 <!DOCTYPE html> <html&g ...
百度地图-图标过多卡顿解决方案
点聚合 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxx& ...
react-native 接百度地图API（显示周边poi）
react-native 接百度地图API (显示周边poi) 目的:显示周边poi及搜索poi功能(给自己的笔记,省去了很多基础步骤,有问题的可以先去了解RN跟android以及Ios原生的通信) ...
python百度地图标注自己的店名_百度地图上怎么显示店名百度地图标注店名方法...
对于很多经营小店的小伙伴来说,能让人一打开百度地图就能看到自己的店名显示在其中便觉得这是一件颇为高兴的事情,但问题是如何在百度地图上怎么显示自己的店名呢?下面小编就为大家带来百度地图标注店名方法,希望 ...
AndroidStudio百度地图开发之显示地图
最近打算研究一些百度地图相关的东西,由于官方网站给的都是基于Eclipse开发的例子,所以在研究过程中遇到不少的坑,在这里记录一下,对后来初用AndroidStudio 开发百度地图的兄弟们也算有个 ...
织梦charset.func.php,织梦程序百度php主动推送代码，亲测可用！
随着百度生态环境及算法改变,内容质量对于搜索引擎来说越来越重要了,那么信息的实时传达到蜘蛛抓取是每位站长必须做到的事情了,链接提交工具是网站主动向百度搜索推送数据的工具,工具可缩短爬虫发现网站链接时间 ...
百度地图开发只显示网格不显示地图信息
这些天公司也没什么事情了,自己就想来玩玩百度地图API,先熟悉一下,废话就不多说了,先将遇到的这个问题描述一下吧!我就是参考了百度官网上的例子,在eclipse中运行了一下,结果只显示网格没有显示地图 ...
原始经纬度转百度地图定位并显示地理位置
手机GPS采集的原始经纬度数据往往不能直接在百度地图上显示, 以下代码将原始经纬度数据转成百度经纬度数据标准,并在网页上显示. <!DOCTYPE html> <html> & ...