一. 插件安装

npm i --save vue-baidu-map-v3

vue-baidu-map-v3使用的百度地图 JavaScript API v3.0

二. main.js全局引入

import BaiduMap from 'vue-baidu-map-v3'

Vue.use(BaiduMap, {
	ak: '你的ak'
})

三. 基本使用

<template>
	<div class="container">
		<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler"></baidu-map>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
			//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
			center: {lng: 0, lat: 0},
      		zoom: 3,
      		map: null,
      		BMap: null
		}
	},
	methods: {
		//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
		handler ({BMap, map}) {
	      this.map = map
	      this.BMap = BMap
	      this.center.lng = 116.404
	      this.center.lat = 39.915
	      this.zoom = 15
	    }
	}
}
</script>
<style>
	.container {
		width: 100%;
		height: 100%;
	}
	.bm-view {
		width: 100%;
		height: 100%; //BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
	}
</style>

四. 覆盖物 (点，海量点，折线，信息窗体)

<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
	// 一个自定义图标的点
	<bm-marker :position="markerPoint" :rotation="markerRotation" :icon="{url:require('@/assets/marker.png'),size:{width:60,height:28}}" />
	//海量点--利用该类可同时在地图上展示万级别的点，目前仅适用于html5浏览器
	<bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_CIRCLE" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>
	//无数条折线，每一条颜色都不一样
	<bm-polyline
       v-for="(item,id) in lineData"
       :key="id+item.color"
       :path="item.line"
       :stroke-color="item.color"
       :stroke-opacity="1"
       :stroke-weight="5"
     />
     // 信息窗体，说实话，百度地图的信息窗体样式真的很丑，动态切换显隐，偶尔还会出现内容不能完全展示的情况。
     <bm-info-window
       v-if="infoWindow.show" // 有时候show属性不好用，就用v-if控制他显示隐藏，
       ref="infoWindow"
       :position="infoWindow.postition"
       :title="infoWindow.title"
       :show="infoWindow.show"
       :close-on-click="false"
       :auto-pan="true"
       @close="handleInfoWindowClose"
       @open="handleInfoWindowOpen"
       @clickclose="handleInfoWindowClickClose"
     >
       <div class="info-cont">
         //定义你自己的信息窗体的内容。
       </div>
     </bm-info-window>
</baidu-map>
<script>
export default {
	data() {
		return {
			//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
			//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
			center: {lng: 0, lat: 0},
      		zoom: 3,
      		map: null,
      		BMap: null,
      		markerPoint: {lng: 116.404, lat: 39.915},
      		markerRotation: 0,
      		points: [], //Array[Point] 例[{lng: 116.404, lat: 39.915}, {lng: 117.404, lat: 40.915}]
      		lineData: [{
      			line: [{lng: 116.404, lat: 39.915}, {lng: 117.404, lat: 39.915}],
      			color: 'red'
			}],
			infoWindow: {
				show: false,
				position: {},
				title: '',
			}
		}
	},
	methods: {
		//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
		handler ({BMap, map}) {
	      this.map = map
	      this.BMap = BMap
	      this.center.lng = 116.404
	      this.center.lat = 39.915
	      this.zoom = 15
	    },
	    clickHandler(e) {
			console.log(e)
		},
		handleInfoWindowOpen() {
	      this.diseaseWindow.show = true
	    },
		handleInfoWindowClose() {
			this.infoWindow.show = false
		},
		handleInfoWindowClickClose() {
	      this.diseaseWindow.show = false
	      this.diseaseWindow.position = {}
	      this.$refs.diseaseWindow.redraw()
	    },
	}
}
</script>

五. 第三方组件库（点聚合）

<template>
	<div class="container">
		<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
			<bml-marker-clusterer v-if="markers.length > 0" :average-center="true" :styles="styles">
		       <bm-marker
		          v-for="marker in markers"
		          :key="marker.name"
		          :position="{lat: marker.latitude, lng: marker.longitude}"
		          :rotation="marker.rotation"
		          :icon="{url: (marker.using ? require('@/assets/marker_on.png') : require('@/assets/marker_off.png')),size:{width:69,height:51}, opts: {imageSize: {width: 69,height: 51}}}"
		          :top="true"
		          @click="handleShow(marker)"
		        >
		          <bm-label
		            v-if="marker.markerKey === curMarker.markerKey"
		            :content="marker.name"
		            :label-style="{borderRadius: '10px', color: '#57a3f3', fontSize : '16px', fontWeight: 'bold', border: 'none', padding: '2px 10px', transform: 'translateX(-50%)'}"
		            :offset="{height: -20, width: 32}"
		          />
		        </bm-marker>
		     </bml-marker-clusterer>
		</baidu-map>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
			//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
			center: {lng: 0, lat: 0},
      		zoom: 3,
      		map: null,
      		BMap: null,
      		markers: [{ // 根据后台返回数据定义
				name: 'marker1',
				latitude: 116.404,
				longitude: 39.915,
				rotation: 0,
				using: false, // 根据此来显示不同的单个marker点的图标
			}],
			curMarker: {}
		}
	},
	methods: {
		//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
		handler ({BMap, map}) {
	      this.map = map
	      this.BMap = BMap
	      this.center.lng = 116.404
	      this.center.lat = 39.915
	      this.zoom = 15
	    },
	    handleShow(marker) {
	    	// 点击后，该marker显示label信息
	    	this.curMarker = marker
	    }
	}
}
</script>

六. 使用中遇到的问题（未解决）

1. 个性化地图后，当缩放到zoom = 5 的时候，世界地图会出现一条空白
2. 个性化地图后，缩放浏览器，再移动地图，地图上的文字会出现重叠，我试过官方例子也有这个问题。

各位大佬们，如果你们有解决方法，可以私我，谢谢各位大佬