路书

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <title>百度地图</title>  
        <!-- <script src="http://api.map.baidu.com/api?v=1.3"></script>   -->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
       
        <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
        <script type="text/javascript">  
        var map  
        function initialize() {   

        var map = new BMap.Map("map"); // 创建地图实例；（"container"）就是刚才新建的div的id属性值            
        var point = new BMap.Point(116.43,23.43);//创建坐标点
        map.centerAndZoom(point, 10);//设置中心坐标及默认缩放级别
          // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 

var points = [ 
  new BMap.Point(117.270591,23.812975), 
  new BMap.Point(117.227819,23.814327), 
  new BMap.Point(117.171452,23.800036), 
  new BMap.Point(117.132368,23.791609), 
  new BMap.Point(117.076919,23.764658), 
  new BMap.Point(117.024827,23.754510), 
  new BMap.Point(116.981047,23.739533), 
  new BMap.Point(116.939091,23.717617), 
  new BMap.Point(116.900199,23.699399), 
  new BMap.Point(116.885031,23.689196), 
  new BMap.Point(116.874584,23.679668), 
  new BMap.Point(116.811841,23.626940), 
  new BMap.Point(116.759632,23.604713), 
  new BMap.Point(116.725061,23.587160), 
  new BMap.Point(116.651402,23.566650), 
  new BMap.Point(116.595323,23.545934), 
  new BMap.Point(116.565463,23.533553), 
  new BMap.Point(116.552337,23.519046), 
  new BMap.Point(116.544596,23.508704), 
  new BMap.Point(116.537630,23.464337), 
  new BMap.Point(116.528264,23.443634), 
  new BMap.Point(116.518571,23.425543), 
  new BMap.Point(116.502256,23.414608), 
  new BMap.Point(116.429954,23.388459), 
  new BMap.Point(116.388039,23.368854), 
  new BMap.Point(116.352537,23.347284), 
  new BMap.Point(116.281605,23.327247), 
  new BMap.Point(116.227800,23.293717), 
  new BMap.Point(116.214108,23.280499), 
  new BMap.Point(116.180527,23.247139), 
  new BMap.Point(116.107918,23.134458), 
  new BMap.Point(116.040802,23.102683), 
  new BMap.Point(116.005375,23.071510), 
  new BMap.Point(115.979189,23.052335), 
  new BMap.Point(115.874687,23.017842), 
  new BMap.Point(115.732058,22.949055), 
  new BMap.Point(115.650940,22.903134), 
  new BMap.Point(115.559445,22.859811), 
];//设置坐标数组
var markers = [
  points[7],//饶平站
  points[15],//潮汕站
  points[23],//潮阳站
  points[28],//普宁站
  points[32]//葵潭站
];
var icon1 = new BMap.Icon('http://source.fooleap.org/marker.png', new BMap.Size(19,25),{anchor: new BMap.Size(9, 25)});//地点
var icon2 = new BMap.Icon('http://source.fooleap.org/power-car.png', new BMap.Size(30, 30), {anchor: new BMap.Size(15, 15)});//动车
var polyline = new BMap.Polyline(points);//创建折线
map.addOverlay(polyline);
var lushu = new BMapLib.LuShu(map, points, {
  landmarkPois:[
    {lng:markers[0].lng,lat:markers[0].lat,html:'饶平站到了',pauseTime:1},
    {lng:markers[1].lng,lat:markers[1].lat,html:'![](http://upload-images.jianshu.io/upload_images/145951-d9d857d119312080.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)潮汕站到了',pauseTime:2},
    {lng:markers[2].lng,lat:markers[2].lat,html:'潮阳站到了',pauseTime:1},
    {lng:markers[3].lng,lat:markers[3].lat,html:'普宁站到了',pauseTime:1},
    {lng:markers[4].lng,lat:markers[4].lat,html:'葵潭站到了',pauseTime:1}
  ],//显示的特殊点，似乎是必选参数，可以留空，据说要和距原线路10米内才会暂停，这里就用原线的点
  defaultContent: '动车继续前行',//覆盖物内容，这个填上面的特殊点文字才会显示
  speed: 20000,//路书速度
  icon: icon2,//覆盖物图标，默认是百度的红色地点标注
  autoView: false,//自动调整路线视野
  enableRotation: false,//覆盖物随路线走向
});
map.addOverlay(polyline);//覆盖折线到地图上
for (i=0;i<5;i++){
  map.addOverlay(new BMap.Marker(markers[i],{icon:icon1}));//覆盖动车站标注到地图上
}
map.centerAndZoom(point, 10);//设置中心坐标及默认缩放级别
map.addEventListener("click",startlushu);//给地图注册点击事件
function startlushu(){
  lushu.start();//启动路书函数
            }  
        }  
        window.onload = initialize;  
    </script>  
    </head>  
    <body>  
        <div id="map" style="width: 1300px; height: 650px"></div>  
        <div id="infoWindow" style="width:50px;height:50px;border:1px solid #ccc;"></div>  
    </body>  
</html>