vue中引入百度地图,以及解决地图出现undefined(地图未定义)
最近有个项目需要使用百度地图,于是自己尝试在先写个demo进行测试,主要体现在下面两种方法:
第一种方法:
在index.htm引入
查看其它文章发现,要在在build文件下的webpack.base.conf.js配置map,个人尝试是否配置无作用
开始实例化生成地图,创建map记得要在mounted周期内:
<template>
<div id='MapBox'>
<div class='baiduMap' id='mapShow'></div>
</div>
</template>
export default {
name:'baiduMap',
data() {
return{
}
},
created(){
},
computed(){
},
mounted(){
this.baiduMap();
},
methods:{
baiduMap:function(){
var map=new BMap.Map('mapShow');
var point=new BMap.Point(114.065537,22.553321);
var marker=new BMap.Marker(point);
map.addOverlay(marker);//添加一个标注
map.centerAndZoom(point,13);//添加初始化中心点及地图层级
map.enableScrollWheelZoom();//开启鼠标滚轮缩放功能。仅对PC上有效
map.enableContinuousZoom();//启用连续缩放效果,默认禁用
}
}
}
<style>
#MapBox {
width: 100%;
height: 100%;
padding: 10px;
}
.baiduMap{
height: 100%;
width: 100%;
}
第二种方法:
该方法主要是为了防止出现实例化加载地图出现BMap is undefined 问题
创建一个map.js,放在src下面和main.js同一层级下:
创建map.js主要是动态加载引入百度地图js文件,防止出现map是undefined的状况
map.js的内容如下:
export function Map(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);
})
}
其次在创建地图的vue中引入map.js,记得map.js引入路径要正确
同第一种方法一样,我们只需改变方法主体内容即可:
mounted(){
this.baiduMap();
},
methods:{
baiduMap:function(){
//第一种方式引入
Map("你的百度秘钥").then( BMap => { //调用map.js中Map()方法,引入百度地图秘钥作为参数
var th = this
var map = new BMap.Map("mapShow"); // 创建Map实例
var point = new BMap.Point(114.065537,22.553321); // 创建点坐标
var marker=new BMap.Marker(point);
map.addOverlay(marker);//添加一个标注
map.centerAndZoom(point,13);//添加初始化中心点及地图层级
map.enableScrollWheelZoom();//开启鼠标滚轮缩放功能。仅对PC上有效
map.enableContinuousZoom();//启用连续缩放效果,默认禁用
})
}
}
上述两种方法实例化的百度地图如图所示:
参考来源:https://www.cnblogs.com/NearTheSea/p/6808093.html
我们还可以通过引入百度地图Vue依赖包,实现地图的加载,详细步骤请参考我的下一篇文章 vue安装百度地图依赖包,以及使用