Vue Baidu Map踩坑记录

Vue Baidu Map踩坑记录"/>

Vue Baidu Map踩坑记录

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);}//移除之前的overlaythis._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)})
}

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