Vue实现百度地图工具栏功能

参考

百度地图JS API示例 页面

实现步骤

index.html引入百度API

	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=百度密钥"></script>
	<link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
	<script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

vue实现相关代码

效果图

<template>
	　　<div>
		<div id="container"></div>
		<ul class="drawing-panel">
			<li class="bmap-btn bmap-marker" id="marker" @click="draw('marker')"></li>
			<li class="bmap-btn bmap-polyline" id="polyline" @click="draw('polyline')"></li>
			<li class="bmap-btn bmap-rectangle" id="rectangle" @click="draw('rectangle')"></li>
			<li class="bmap-btn bmap-polygon" id="polygon" @click="draw('polygon')"></li>
			<li class="bmap-btn bmap-circle" id="circle" @click="draw('circle')"></li>
		</ul>
	</div>
</template>

　　　　
<script>
	import {
		Message,
		MessageBox,
		Notification
	} from 'element-ui'

	export default {
		name: 'baiduMap',
		data: function() {
			return {
				map: '',
				drawingManager: null,
			};
		},
		mounted() {
			this.initMap();
		},
		methods: {
			initMap() {
				this.map = new BMapGL.Map("container", {
					enableMapClick: false
				}); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)

				this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
				this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

				var styleOptions = {
					strokeColor: '#5E87DB', // 边线颜色
					fillColor: '#5E87DB', // 填充颜色。当参数为空时，圆形没有填充颜色
					strokeWeight: 2, // 边线宽度，以像素为单位
					strokeOpacity: 1, // 边线透明度，取值范围0-1
					fillOpacity: 0.2 // 填充透明度，取值范围0-1
				};
				var labelOptions = {
					borderRadius: '2px',
					background: '#FFFBCC',
					border: '1px solid #E1E1E1',
					color: '#703A04',
					fontSize: '12px',
					letterSpacing: '0',
					padding: '5px'
				};

				// 实例化鼠标绘制工具
				this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
					// isOpen: true,        // 是否开启绘制模式
					enableCalculate: false, // 绘制是否进行测距测面
					enableSorption: true, // 是否开启边界吸附功能
					sorptiondistance: 20, // 边界吸附距离
					circleOptions: styleOptions, // 圆的样式
					polylineOptions: styleOptions, // 线的样式
					polygonOptions: styleOptions, // 多边形的样式
					rectangleOptions: styleOptions, // 矩形的样式
					labelOptions: labelOptions, // label样式
				});
				var thi = this;
				this.drawingManager.addEventListener('polygoncomplete', function(e, overlay) {
					console.info('polygoncomplete', e.getPath())
					thi.drawingManager.close();
				});
				this.drawingManager.addEventListener('polylinecomplete', function(e, overlay) {
					console.info('polylinecomplete', e.getPath())
					thi.drawingManager.close();
				});
				this.drawingManager.addEventListener('rectanglecomplete', function(e, overlay) {
					console.info('rectanglecomplete', e.getPath())
					thi.drawingManager.close();
				});
				this.drawingManager.addEventListener('circlecomplete', function(e, overlay) {
					console.info('circlecomplete', e.getPath())
					thi.drawingManager.close();
				});
				this.drawingManager.addEventListener('markercomplete', function(e, overlay) {
					console.info('markercomplete', e.getPosition())
					thi.drawingManager.close();
				});

			},
			draw(e) {
				
				switch (e) {
					case 'marker': {
						var drawingType = BMAP_DRAWING_MARKER;
						break;
					}
					case 'polyline': {
						var drawingType = BMAP_DRAWING_POLYLINE;
						break;
					}
					case 'rectangle': {
						var drawingType = BMAP_DRAWING_RECTANGLE;
						break;
					}
					case 'polygon': {
						var drawingType = BMAP_DRAWING_POLYGON;
						break;
					}
					case 'circle': {
						var drawingType = BMAP_DRAWING_CIRCLE;
						break;
					}
				}
				let overlays = this.map.getOverlays(); // 获取所有覆盖物（标记点）

				for (let i = 0; i < overlays.length; i++) {
					this.map.removeOverlay(overlays[i]); // 如果有，则移除该覆盖物
				}
				// 进行绘制
				if (this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === drawingType) {
					this.drawingManager.close();
				} else {
					this.drawingManager.setDrawingMode(drawingType);
					this.drawingManager.open();
				}
			},
		}
	};
</script>
　
　　<style scoped>
	.head {
		margin-left: 200px;
		width: 100px;
	}

	.baiduMap {
		width: 100%;
		height: 800px;
		margin: 0 auto;
		overflow: hidden;
	}

	.ivu-form-item {
		display: inline-block;
		width: 40%;
	}

	.bm-view>div {
		width: 100%;
		height: 700px !important;
	}

	::v-deep .anchorBL {
		display: none !important;
	}

	body,
	html,
	#container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin: 0;
		font-family: "微软雅黑";
	}

	ul li {
		list-style: none;
	}

	.info {
		z-index: 999;
		width: auto;
		min-width: 22rem;
		padding: .75rem 1.25rem;
		margin-left: 1.25rem;
		position: fixed;
		top: 1rem;
		background-color: #fff;
		border-radius: .25rem;
		font-size: 14px;
		color: #666;
		box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
	}

	.drawing-panel {
		z-index: 999;
		position: fixed;
		bottom: 3.5rem;
		margin-left: 2.5rem;
		padding: 0;
		border-radius: .25rem;
		height: 47px;
		box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
	}

	.bmap-btn {
		border-right: 1px solid #d2d2d2;
		float: left;
		width: 64px;
		height: 100%;
		background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
		cursor: pointer;
	}

	.drawing-panel .bmap-marker {
		background-position: -65px 0;
	}

	.drawing-panel .bmap-polyline {
		background-position: -195px 0;
	}

	.drawing-panel .bmap-rectangle {
		background-position: -325px 0;
	}

	.drawing-panel .bmap-polygon {
		background-position: -260px 0;
	}

	.drawing-panel .bmap-circle {
		background-position: -130px 0;
	}
</style>

小结

这里做了个简单实现示例，限制一次标记一种图形 并监听完成事件，从而获取数据坐标点。