Vue Baidu Map踩坑记录

修改驾车路线起点、途经点、终点图标

<bm-driving>
	:start="start"
	:end="end"
	:waypoints="waypoints"
	@markersset="markersset"
	@serchcomplete="serchcomplete"
	:auto-viewport="true"
    :panel="false"
</bm-drving>

	markersset(routes) {
		const startIcon = new this.BMap.Icon(require('./start.png'), new this.BMap.Size(35, 35), { anchor: new this.BMap.Size(14, 33)},
			markerStart = new this.BMap.Marker(routes[0].marker.getPosition(), { icon: startIcon }); 
		this.map.removeOverlay(routes[0].marker); // 删除起点图标
		this.map.removeOverlay(routes[routes.length - 1].marker); // 删除终点图标
		for(let i = 1; i < routes.length - 1; i ++ ) {
			let marker = routes[i].Um;						
			this.map.removeOverlay(marker); //删除途经点的图标及点击事件
		}
		this.map.addOverlay(markerStart); // 自定义起点定位图标

删除起点终点的图标比较容易处理，途经点图标替换后发现还是有默认的点击事件，尝试了很多办法，最后使用获取routes[i].Um方式去清除途经点的图标和点击事件，达到预期效果。

路书 只回放最后一段路径 控制回放速度

引入路书 ： import LuShu from bmaplib.lushu

	serchcomplete(result) {
		if (result != null && result.getNumPlans() > 0) {
			const routePlan = result.getPlan(0); // 选择第一条方案
			const routeNum = routePlan.getNumRoutes(); // 方案中包含的线路的个数
			let arrPois = [];
			if (routeNum > 0) {
				arrPois = arrPois.concat(routePlan.getRoute(routeNum - 1).getPath()); //最后一段路线的地理坐标点数组
				this.hanleLuShu(arrPois);
			}
		}
	},
	hanleLuShu(arrPois) {
		let lushuData = arrPois.slice(parseInt(-arrPois.length/2));
        let speed = lushuData.length > 1000 ? 100000
                : lushuData.length > 800 ? 80000
                    : lushuData.length > 500 ? : 40000; // 处理路书速度
        let icon = new this.BMap.Icon(require('./images/track_car.png'), {width: 55, height: 22},{anchor:new this.BMap.Size(27, 13)}); 
; // 小车图片
        const lushu = new LuShu(this.map, lushuData, {
            autoView: false, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
            icon: icon,
            speed: speed,
            enableRotation: true, // 是否设置marker随着道路的走向进行旋转
            landmarkPois: []
        });
        lushu.start();
	}

路书 取消掉下动画

在baidu-map的ready函数中调用handleLushuAnimation函数覆盖路书源码：

handleLushuAnimation() {
	LuShu.prototype._addMarker = function () {
         if (this._marker) {
             this.stop();
             this._map.removeOverlay(this._marker);
             clearTimeout(this._timeoutFlag);
         }
         //移除之前的overlay
         this._overlay && this._map.removeOverlay(this._overlay);
         var marker = new BMap.Marker(this._path[0]);
         this._opts.icon && marker.setIcon(this._opts.icon);
         this._map.addOverlay(marker);
         // marker.setAnimation(BMAP_ANIMATION_DROP); //把这行注释
         this._marker = marker;
	}
}

自定义图注标签，点击后隐藏

<bm-marker>
	v-for="(markerItem, markIdx) in pointsList"
	:key="markIdx"
	:position="markerItem"
	:icon="icon"
	:dargging="true" //可拖拽
	@click="openMarkerLabel($event)"
</bm-marker>

openMarkerLabel(event) { // 自定义图注标签
	const label = new this.BMap.Label('标签信息内容，可多个Marker共存', { offset: new this.BMap.Size(18, -20) });
	label.setStyle({
		‘postion’: 'absolute',
		'height': '18px',
		'backgroundColor‘: 'blue',
		……（自定义样式）
	})
	event.target.setLabel(label);
	this.handleLabelClick(event.target.getLabel());
}

handleLabelClick(label) {
	label.addEventListener('click', () => {
		this.map.removeOverlay(label)
	})
}

由于信息弹窗最多只能支持显示一个窗口，使用这个方法可以模拟多个信息窗口共存。