页面的head部分，需简单设置页面元素的样式，对接百度地图并引入必要的JS插件，代码如下：

<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
#map_canvas{width:100%;height:500px;}
#result {width:100%;}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=RKVMcKG7V23ABjbKnvOGyjY5GGaj0eLL"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>-->
<script type="text/javascript" src="js/maplushu.js"></script>

页面的body部分，需设置好地图的div容器和其余的控制按钮，代码如下：

<div id="map_canvas"></div>
<div id="result"></div>
<button id="run">开始</button>
<button id="stop">停止</button>
<button id="pause">暂停</button>
<button id="hide">隐藏信息窗口</button>
<button id="show">展示信息窗口</button>

页面的底部，实例化百度地图，设置好多个路线坐标点，并设置好按钮的点击事件响应，代码如下：

var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
var lushu;
// 实例化一个驾车导航用来生成路线
var drv = new BMap.DrivingRoute('北京', {
    onSearchComplete: function(res) {
        if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
            var plan = res.getPlan(0);
            var x=116.307852, y=40.057031;  //用变量存值
            var arrPois =[
                new BMap.Point(116.357571,39.988698),
                new BMap.Point(116.338749,40.026922),
                new BMap.Point(116.323082,40.047674),
                new BMap.Point(x,y)//自己添加的路线，可按照自己的这个路线行走
            ];
           /* for(var j=0;j<plan.getNumRoutes();j++){
                var route = plan.getRoute(j);
                arrPois= arrPois.concat(route.getPath());    //行走路线
            }*/
            map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#337AB7'}));
            map.setViewport(arrPois);

            lushu = new BMapLib.LuShu(map,arrPois,{
                defaultContent:"粤A30780",//"从天安门到百度大厦"
                autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                icon  : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                speed: 4500,
                enableRotation:true,//是否设置marker随着道路的走向进行旋转
                landmarkPois: [
                  {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
                    {lng:116.315391,lat:40.66,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
                    {lng:116.381476,lat:58.88,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
                ],
            });
           /*添加点标记begin*/
            for(var i = 0; i< arrPois.length; i++){
                var marker = new BMap.Marker( arrPois[i]);//基于定位的这个点的点位创建marker
                map.addOverlay(marker);//将marker作为覆盖物添加到map地图上
              /*  marker.setLabel(new BMap.Label("我是商圈:"+(i+1),{offset:new BMap.Size(20,-10)}));//消息框*/
            }
              /*  var marker = new BMap.Marker(arrPois[0]);//基于定位的这个点的点位创建marker
                map.addOverlay(marker);//将marker作为覆盖物添加到map地图上
                var marker = new BMap.Marker(arrPois[arrPois.length-1]);
                map.addOverlay(marker);*/
          /*添加点标记end*/

//                lushu.start();
        }
    }
});
drv.search('永顺镇', '百度大厦');
//绑定事件
$("run").onclick = function(){
    lushu.start();
};
$("stop").onclick = function(){
    lushu.stop();
};
$("pause").onclick = function(){
    lushu.pause();
};
$("hide").onclick = function(){
    lushu.hideInfoWindow();
};
$("show").onclick = function(){
    lushu.showInfoWindow();
};
function $(element){
    return document.getElementById(element);
}