There is currently a system using Baidu Maps, and the road book uses Baidu's LuShu.js, which is connected to: Baidu Road Book
Many times we need to perform some corresponding operations after the road book is finished. For example, when the road book starts, we draw all the routes, and we need to clean up after the run; after the road book ends, we need to give the user a prompt; after the road book ends, we need to perform other operations. etc,,,,
The following is a small change based on LuShu.js ( since iteye cannot be marked in red in the code, the complete modified LuShu.js can refer to the attachment ):
/**
* @description start exercise
* @param none
* @return no return value.
*
* @example <b>Reference example:</b><br />
* lushu.start();
*/
LuShu.prototype.start = function(_end_callback) {
var me = this,
len = me._path.length;
//############################ The code cannot be marked in red, this mark shows that the following is added by myself ######## ###################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################
//Customize the callback function to judge when it ends --lyf
if(this.end_callback) {
//The current road book is not over, the new one will return directly
console.log("The current road book is not finished, and it will start when it is finished");
return ;
}
if(_end_callback) {
// Callback when the road book finishes running
this.end_callback = _end_callback ;
}
//############################ The code cannot be marked in red, this mark shows that the above is added by myself ######## ###################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################
//Not the first click to start, and the car has not yet reached the end
if (me.i && me.i < len - 1) {
//If you don't press pause and then press start, no processing will be done
if (!me._fromPause) {
return;
}else if(!me._fromStop){
//Press the pause button and press start again to move directly to the next point
//And during this process, the stop button was not pressed
//Prevent the exception of stop first, then pause, and then start continuously
me._moveNext(++me.i);
}
}else {
//The first click to start, or click to start after stop
me._addMarker();
//Wait for the marker animation to complete and then load the infowindow
me._timeoutFlag = setTimeout(function() {
me._addInfoWin();
if(me._opts.defaultContent == ""){
me.hideInfoWindow();
}
me._moveNext(me.i);
},400);
}
// reset state
this._fromPause = false;
this._fromStop = false;
},
/**
* move to next point
* @param {Number} index The index of the current point.
* @return no return value.
*/
_moveNext: function(index) {
var me = this;
if (index < this._path.length - 1) {
me._move(me._path[index], me._path[index + 1], me._tween.linear);
} else {
//############################ The code cannot be marked in red, this mark shows that the following is added by myself ######## ###################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################
if( this.end_callback){
this.end_callback();
this.end_callback = null;
if(this._marker)
this._map.removeOverlay(this._marker);
}
//############################ The code cannot be marked in red, this mark shows that the above is added by myself ######## ###################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################
}
},
The red part is the content added by yourself. The first part passes a callback function when starting in start, and each time it determines whether the callback already exists. If it exists, it means that the current road book is not over; the second part is to execute the road book after running. Callback function, clear the marker of the current road book; you can expand it yourself based on this.
Example of calling:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Road book callback test</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b5eb8bb91adccfa6487135d960a1e8"></script>
<script type="text/javascript" src="LuShu.js"></script>
<style type="text/css">
html{
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin:0px;
padding:0px;
border:0px;
}
.container {
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
}
.map {
width:100%;
height:100%;
background:#d5e6f5;
position:absolute;
float:left;
}
.add_btn {
text-align:center;
position:absolute;
bottom: 5px;
left: 350px;
z-index: 11;
}
</style>
</head>
<body>
<div class="container">
<div id="map" class="map">
</div>
<div class="add_btn">
<input type="button" title="" value="路书" onclick="lushu_run()">
</div>
</div>
<script type="text/javascript">
var map;
var lushu;
window.onload = function() {
map = new BMap.Map('map'); // create a Map instance
var point = new BMap.Point(116.404, 39.915);//, 11
map.centerAndZoom(point, 11);
map.enableScrollWheelZoom(true); //Enable mouse wheel zoom
}
function lushu_run() {
if (lushu) {
alert("Please wait for the current road book to finish.");
return;
}
var myIcon = new BMap.Icon(
"http://sandbox.runjs.cn/uploads/rs/101/wmbvrxnx/kache.png",
new BMap.Size(37, 25), {
imageOffset : new BMap.Size(0, 0)
});//truck
var driving = new BMap.DrivingRoute(map); //Driving example
//Start the road book playback path after the path search
driving.setSearchCompleteCallback(function(res) {
var arrPois = res.getPlan(0).getRoute(0).getPath();
// draw the path based on the returned path planning
var polyline = new BMap.Polyline(arrPois, {
strokeColor : '#111'
})
map.addOverlay(polyline);
//Set the map view to the current path
map.setViewport(arrPois);
lushu = new BMapLib.LuShu(map, arrPois, {
defaultContent : "",//
autoView : true,//Whether to turn on automatic field of view adjustment, if turned on, the road book will automatically adjust according to the field of view during the movement
icon : myIcon,
speed : 500, //speed setting
enableRotation : true,//Whether to set the marker to rotate with the direction of the road
landmarkPois : []
});
//The road book starts, the parameter is a function
lushu.start(function() {
console.log("The callback at the end of the road book has started to be called");
lushu = null; //The current road book is empty
map.removeOverlay(polyline); //Clean up the path drawn in advance in the playback of the road book
});
});
var start = new BMap.Point(116.406, 39.925);//, 11
var end = new BMap.Point(116.402, 39.923);//, 11
driving.search(start, end);
}
</script>
</body>
</html>
1. After the page is opened, click the "Road book" button to start searching for the route and execute the road book.
2. Click the road book again, because the page judges lushu as a parameter, so it will prompt "The road book is executing..."
3. After the end of the road book, clean up the path polyline, and execute the callback function to empty the lushu
The complete example is packaged in the attachment.