vue项目调用百度地图 BMap is not defined

这次老板新接了一个四点半官网页面，使用vue来写。emm……我感觉整个人都不好了，两天半解决了20个静态页面。还好vue写页面简直飞快，遇到一个vue的新坑，使用百度地图。

研究了好一会，总是报错BMap is not defined

我只有一个页面需要用到地图，所以我是使用cdn引入的方式来写的，并没有像网上一些教程一样使用npm引入安装。

直接简单粗暴的根据百度地图api来写，虽然报错。那就解决报错的bug就行了。好了，下面开始说说步骤

在需要页面的处引入cdn：

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

我的是在</template>标签结尾后引用的

在webpack配置里module.exports中加个externals：

module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
// app: './src/main.js'
app: ["babel-polyfill", "./src/main.js"] //引入babel-polyfill 兼容IE
},
 externals: { "BMap": "BMap" },
}

此处依旧报错

接着，使用异步加载

新建一个map.js，里边的内容

export function map(ak) {
return new Promise(function (resolve, reject) {
window.onload = 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);
})
}

在需要页面import进来，

import {map} from '@/map.js'

最后挂载，在css上，记得设置地图盒子宽高，不然显示不出来

mounted () {
this.$nextTick(function(){
var _this = this;
MP(_this.ak).then(BMap => {
var map = new BMap.Map("allmap");
var point = new BMap.Point(经纬度,经纬度);
map.centerAndZoom(point, 19);
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中
var label = new BMap.Label("公司名字",{offset:new BMap.Size(20,-10)});
label.setStyle({
borderColor : "black"
});
//marker.addEventListener("click", function(){    //点击弹出可去掉注释
marker.setLabel(label); //开启信息窗口
//});  //点击弹出可去掉注释         

})
})
},

　　百度地图生成器

　　http://api.map.baidu.com/lbsapi/creatmap/index.html

百度地图拾取坐标系统
http://api.map.baidu.com/lbsapi/getpoint/index.html

百度地图JavaScript API
http://lbsyun.baidu.com/index.php?title=jspopular

之前写过一篇关于html上引用百度地图的博文：https://www.cnblogs.com/web1/p/8519987.html

更多专业前端知识，请上【猿2048】www.mk2048.com

vue项目调用百度地图 BMap is not defined相关推荐

vue项目调用百度地图定位，判断当前位置是否在目标位置范围内
之前用vue做了一个百度地图定位功能,判断是否当前位置在目标位置范围内的小功能,类似这样: 直接上代码百度地图定位,设置目标位置范围,判断当前位置到目标位置的距离,BDMap.vue <tem ...
vue项目调用百度地图api 学习总结
一.安装百度地图插件: npm install vue-baidu-map –save 二.在vue项目首页index.html进入插件: 注:src里的http必须要写如果不写会出现bug! ! ! ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫现在也是体会到了,学新的东西还是得看官方文档 ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
Vue项目引用百度地图并实现搜索定位等功能
Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路 ...
Vue项目中用百度地图实现城市定位
说明:本文主要是介绍如何在Vue项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
Vue项目使用百度地图api
目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证进入百度地图开放平台官网,(认证需要身份证号码,人脸识别,手机百度APP,邮箱地址) 注册登录完 ...

vue项目调用百度地图 BMap is not defined

vue项目调用百度地图 BMap is not defined相关推荐

最新文章

热门文章

vue项目 调用百度地图 BMap is not defined

vue项目 调用百度地图 BMap is not defined相关推荐

最新文章

热门文章

vue项目调用百度地图 BMap is not defined

vue项目调用百度地图 BMap is not defined相关推荐