插入地图

方法一
1, npm install vue-baidu-map –save
2,
3,在vebpack.base.conf.js添加配置
externals: {
‘BMap’: ‘BMap’,
‘BMap_Symbol_SHAPE_POINT’: ‘BMap_Symbol_SHAPE_POINT’
},
4,新建vue文件用于投放地图,新建地图容器

5,在methods内新建调用地图函数
baiduMap:function(){
var map = new BMap.Map(“allMap”);
var point = new BMap.Point(116.404, 39.915);
var opts = {anchor:BMAP_ANCHOR_BOTTOM_RIGHT}
var ove={anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_ZOOM}
map.addControl(new BMap.GeolocationControl(opts));
map.addControl(new BMap.NavigationControl(ove));
},
//根据设备生成地图高度 (刚好铺满全屏)
setHeight:function(){
var H = window.screen.availHeight;
var mapH = (H/100 - 0.5) + ‘rem’; //0.5rem是我底部组件的高度 要减去这个高度
var mapD = document.getElementById(‘allMap’);
mapD.style.height = mapH;
}
6,在mounted函数内调用这两个函数
mounted:function(){
this.baiduMap();
this.setHeight();
},