最近在写前台网站的时候，为了简单使用了vue，下面的文章是基于vue的baidu-map组件的使用。

最终效果如下：

下面介绍一下具体实现步骤：

1.npm 安装vue-baidu-map——npm install vue-bai-map --save

安装插件

2.main.js中全局注册

import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'xxxxx',
});

3.页面上添加div地图元素

3.1 html部分添加元素

<div class="about-map" id="container"></div>

3.2 script部分添加地图配置内容

mounted(){
	this.baiduMap();
},
methods:{
	baiduMap(){
		let map = new BMap.Map('container');//创建地图实例
		let point = new BMap.Point(119.22222,30.44444);//创建点坐标
		map.centerAndZoom(point,15);//初始化地图，设置中心点坐标和地图级别
		map.enableScrollWheelZoom(false);//滚动缩放
		let marker = new BMap.Marker(point);//创建标注 点
		map.addOverlay(marker);//将标注添加到地图中
		map.addControl(new BMap.NavigationControl(BMap_ANCHOR_TOP_LEFT));//控件左上角
		//信息窗口内容
		let content = `<div>
			电子产业园区
		</div><div>电话：13412341234</div>`;
		//信息窗口标题
		let title = {
			title:'百度地图地址',
			width:400,//宽度
			height:50,//高度
			panel:'panel'，//检索结果面板
			enableAutoPan:true,//自动平移
			searchTypes:[
				BMAPLIB_TAB_FROM_HERE,//从这里出发
				BMAPLIB_TAB_SEARCH,//周边检索
				BMAPLIB_TAB_TO_HERE,//到这里去
			]
		};
		//创建一个信息窗口实例
		let searchInfoWindow = new BMapLib.SearchInfoWindow(map,content,title);
		searchInfoWindow.open(marker);
		//点击红点弹出西南西窗口
		marker.addEventListener('click',function(){
			searchInfoWindow.open(marker);
		})
	}
}

3.3 style部分css样式

.about-map {
  width: 1280px;
  height: 510px;
  margin: 130px auto 10px auto;
}

.map-wrap {
  width: 100%;
  height: 100%;
}

完成！！！