路書

<!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"); // 創(chuàng)建地圖實例；（"container"）就是剛才新建的div的id屬性值            
        var point = new BMap.Point(116.43,23.43);//創(chuàng)建坐標點
        map.centerAndZoom(point, 10);//設(shè)置中心坐標及默認縮放級別
          // 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), 
];//設(shè)置坐標數(shù)組
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);//創(chuàng)建折線
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}
  ],//顯示的特殊點，似乎是必選參數(shù)，可以留空，據(jù)說要和距原線路10米內(nèi)才會暫停，這里就用原線的點
  defaultContent: '動車繼續(xù)前行',//覆蓋物內(nèi)容，這個填上面的特殊點文字才會顯示
  speed: 20000,//路書速度
  icon: icon2,//覆蓋物圖標，默認是百度的紅色地點標注
  autoView: false,//自動調(diào)整路線視野
  enableRotation: false,//覆蓋物隨路線走向
});
map.addOverlay(polyline);//覆蓋折線到地圖上
for (i=0;i<5;i++){
  map.addOverlay(new BMap.Marker(markers[i],{icon:icon1}));//覆蓋動車站標注到地圖上
}
map.centerAndZoom(point, 10);//設(shè)置中心坐標及默認縮放級別
map.addEventListener("click",startlushu);//給地圖注冊點擊事件
function startlushu(){
  lushu.start();//啟動路書函數(shù)
            }  
        }  
        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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容