百度地图轨迹回放,自定义路书,边走边画线

转自:https://www.cnblogs.com/syj2016/p/5685294.html

百度地图轨迹回放,自定义路书,边走边画线

在原有的百度路书的基础上,做了修改,使其能实现边走边画线的需求.

源代码如下,其中您的密钥要换成自己的,如果不换,则需要粘贴到百度API示例里面的GPS路书的编辑器中才能运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<html lang= "en" >
<head>
     <meta charset= "utf-8"  />
     <title>轨迹回放(路书)</title>
     <style type= "text/css" >
         body, html{width: 100%;height: 100%;margin:0;font-family: "微软雅黑" ;}
         #map_canvas{width:100%;height:500px;}
         #result {width:100%}
     </style>
     <script src= "http://api.map.baidu.com/api?v=2.0&ak=您的密钥" ></script>
     <script type= "text/javascript"  src= "http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js" ></script>
</head>
<body>
     <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>
     <script>
     var  marker;
     var  map =  new  BMap.Map( 'map_canvas' );
     map.enableScrollWheelZoom();
     map.centerAndZoom();
     var  lushu;
     // 实例化一个驾车导航用来生成路线
   //  var drv = new BMap.DrivingRoute('北京', {
    //     onSearchComplete: function(res) {
     //        if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
               //  var plan = res.getPlan(0);
                // var arrPois =[];
//                for(var j=0;j<plan.getNumRoutes();j++){
                  //   var route = plan.getRoute(j);
                  //   arrPois= arrPois.concat(route.getPath());
                // }
       var  arrPois=[ new  BMap.Point(116.403984,39.914004), new  BMap.Point(116.402116,39.913938), new  BMap.Point(116.402116,39.913938), new  BMap.Point(116.402046,39.913928), new  BMap.Point(116.401856,39.913927), new  BMap.Point(116.401547,39.913926), new  BMap.Point(116.401008,39.913923), new  BMap.Point(116.400599,39.913921), new  BMap.Point(116.39999,39.913908), new  BMap.Point(116.399471,39.913875), new  BMap.Point(116.399042,39.913852), new  BMap.Point(116.398035,39.913835), new  BMap.Point(116.395593,39.913683), new  BMap.Point(116.395383,39.913681), new  BMap.Point(116.395114,39.913658), new  BMap.Point(116.394666,39.913664), new  BMap.Point(116.390265,39.91349), new  BMap.Point(116.38925,39.913456), new  BMap.Point(116.388931,39.913461), new  BMap.Point(116.388643,39.913457), new  BMap.Point(116.388335,39.913463), new  BMap.Point(116.386455,39.913424), new  BMap.Point(116.386166,39.913429), new  BMap.Point(116.385898,39.913425), new  BMap.Point(116.384327,39.913399), new  BMap.Point(116.384168,39.913396), new  BMap.Point(116.38384,39.913391), new  BMap.Point(116.383472,39.913395), new  BMap.Point(116.383323,39.913402), new  BMap.Point(116.382796,39.913403), new  BMap.Point(116.382747,39.913402), new  BMap.Point(116.38227,39.913394), new  BMap.Point(116.381594,39.913372), new  BMap.Point(116.381465,39.91337), new  BMap.Point(116.381445,39.913369), new  BMap.Point(116.381197,39.913365), new  BMap.Point(116.380779,39.913348), new  BMap.Point(116.38066,39.913346), new  BMap.Point(116.380491,39.913343), new  BMap.Point(116.380488,39.913341), new  BMap.Point(116.38014,39.913344), new  BMap.Point(116.379435,39.913342), new  BMap.Point(116.378848,39.913331), new  BMap.Point(116.378103,39.913307), new  BMap.Point(116.376722,39.913282), new  BMap.Point(116.374238,39.913227), new  BMap.Point(116.373105,39.913226), new  BMap.Point(116.37221,39.91321), new  BMap.Point(116.370004,39.913171), new  BMap.Point(116.369865,39.913169), new  BMap.Point(116.369706,39.913166), new  BMap.Point(116.369616,39.913175), new  BMap.Point(116.366474,39.913103), new  BMap.Point(116.366276,39.913109), new  BMap.Point(116.365997,39.913105), new  BMap.Point(116.365898,39.913104), new  BMap.Point(116.365639,39.91312), new  BMap.Point(116.364605,39.913094), new  BMap.Point(116.364127,39.913087), new  BMap.Point(116.364126,39.913086), new  BMap.Point(116.363917,39.913193), new  BMap.Point(116.363827,39.913262), new  BMap.Point(116.363797,39.913311), new  BMap.Point(116.363767,39.913391), new  BMap.Point(116.363767,39.913541), new  BMap.Point(116.363757,39.913771), new  BMap.Point(116.363757,39.913821), new  BMap.Point(116.363737,39.91432), new  BMap.Point(116.363687,39.914809), new  BMap.Point(116.363647,39.915039), new  BMap.Point(116.363617,39.915198), new  BMap.Point(116.363567,39.915377), new  BMap.Point(116.363527,39.915527), new  BMap.Point(116.363487,39.915676), new  BMap.Point(116.363438,39.915905), new  BMap.Point(116.363436,39.915905), new  BMap.Point(116.363327,39.916154), new  BMap.Point(116.363327,39.916154), new  BMap.Point(116.363356,39.916444), new  BMap.Point(116.363376,39.916694), new  BMap.Point(116.363504,39.917936), new  BMap.Point(116.363404,39.918974), new  BMap.Point(116.363384,39.919494), new  BMap.Point(116.363374,39.919673), new  BMap.Point(116.363374,39.919723), new  BMap.Point(116.363374,39.919763), new  BMap.Point(116.363374,39.919813), new  BMap.Point(116.363364,39.920293), new  BMap.Point(116.363364,39.920393), new  BMap.Point(116.363273,39.922131), new  BMap.Point(116.363263,39.922441), new  BMap.Point(116.363192,39.92405), new  BMap.Point(116.363183,39.92422), new  BMap.Point(116.363183,39.9243), new  BMap.Point(116.363173,39.92446), new  BMap.Point(116.363122,39.925599), new  BMap.Point(116.363112,39.925818), new  BMap.Point(116.363072,39.926798), new  BMap.Point(116.363052,39.927057), new  BMap.Point(116.363042,39.927277), new  BMap.Point(116.363002,39.928407), new  BMap.Point(116.362952,39.929326), new  BMap.Point(116.362952,39.929466), new  BMap.Point(116.362942,39.929486), new  BMap.Point(116.362842,39.931454), new  BMap.Point(116.362822,39.931694), new  BMap.Point(116.362822,39.931834), new  BMap.Point(116.362802,39.932393), new  BMap.Point(116.362772,39.933293), new  BMap.Point(116.362763,39.933313), new  BMap.Point(116.362683,39.934892), new  BMap.Point(116.362603,39.936531), new  BMap.Point(116.362544,39.93769), new  BMap.Point(116.362524,39.93804), new  BMap.Point(116.362514,39.938159), new  BMap.Point(116.362514,39.938209), new  BMap.Point(116.362514,39.938259), new  BMap.Point(116.362504,39.938509), new  BMap.Point(116.362465,39.939329), new  BMap.Point(116.362405,39.940878), new  BMap.Point(116.362376,39.941888), new  BMap.Point(116.362366,39.942108), new  BMap.Point(116.362366,39.942138), new  BMap.Point(116.362356,39.942398), new  BMap.Point(116.362337,39.942597), new  BMap.Point(116.362307,39.943287), new  BMap.Point(116.362277,39.943637), new  BMap.Point(116.362218,39.944746), new  BMap.Point(116.362219,39.946046), new  BMap.Point(116.362219,39.946196), new  BMap.Point(116.362219,39.946226), new  BMap.Point(116.362209,39.946276), new  BMap.Point(116.362209,39.946326), new  BMap.Point(116.362199,39.946436), new  BMap.Point(116.36218,39.946876), new  BMap.Point(116.36213,39.947595), new  BMap.Point(116.36227,39.948167), new  BMap.Point(116.36235,39.948339), new  BMap.Point(116.362509,39.948611), new  BMap.Point(116.362738,39.948914), new  BMap.Point(116.362928,39.949197), new  BMap.Point(116.363167,39.94943), new  BMap.Point(116.363416,39.949604), new  BMap.Point(116.363913,39.949851), new  BMap.Point(116.36469,39.950052), new  BMap.Point(116.365595,39.950366), new  BMap.Point(116.365794,39.950429), new  BMap.Point(116.366093,39.950524), new  BMap.Point(116.366242,39.950556), new  BMap.Point(116.367266,39.950863), new  BMap.Point(116.368162,39.951127), new  BMap.Point(116.371174,39.952029), new  BMap.Point(116.371324,39.952072), new  BMap.Point(116.372029,39.952315), new  BMap.Point(116.372417,39.952482), new  BMap.Point(116.37365,39.953024), new  BMap.Point(116.374435,39.953378), new  BMap.Point(116.374833,39.953536), new  BMap.Point(116.374962,39.953598), new  BMap.Point(116.375588,39.95386), new  BMap.Point(116.375585,39.95386), new  BMap.Point(116.375903,39.953895), new  BMap.Point(116.376171,39.95396), new  BMap.Point(116.376399,39.954035), new  BMap.Point(116.376648,39.954099), new  BMap.Point(116.376727,39.954131), new  BMap.Point(116.377026,39.954216), new  BMap.Point(116.377085,39.954237), new  BMap.Point(116.377354,39.954312), new  BMap.Point(116.377642,39.954358), new  BMap.Point(116.377821,39.954391), new  BMap.Point(116.378198,39.954458), new  BMap.Point(116.378377,39.954491), new  BMap.Point(116.378536,39.954504), new  BMap.Point(116.378586,39.954505), new  BMap.Point(116.378715,39.954517), new  BMap.Point(116.378924,39.954531), new  BMap.Point(116.379311,39.954558), new  BMap.Point(116.379848,39.954598), new  BMap.Point(116.379898,39.954599), new  BMap.Point(116.380037,39.954611), new  BMap.Point(116.380723,39.954664), new  BMap.Point(116.381458,39.954697), new  BMap.Point(116.381736,39.954712), new  BMap.Point(116.382432,39.954744), new  BMap.Point(116.38273,39.954759), new  BMap.Point(116.38279,39.95476), new  BMap.Point(116.383098,39.954795), new  BMap.Point(116.383456,39.954882), new  BMap.Point(116.383536,39.954903), new  BMap.Point(116.383576,39.954914), new  BMap.Point(116.383655,39.954935), new  BMap.Point(116.383695,39.954946), new  BMap.Point(116.383795,39.954987), new  BMap.Point(116.383854,39.955019), new  BMap.Point(116.383884,39.955029), new  BMap.Point(116.383954,39.95507), new  BMap.Point(116.384013,39.955121), new  BMap.Point(116.384063,39.955162), new  BMap.Point(116.384093,39.955183), new  BMap.Point(116.384153,39.955244), new  BMap.Point(116.384212,39.955315), new  BMap.Point(116.384242,39.955345), new  BMap.Point(116.384382,39.955518), new  BMap.Point(116.384441,39.955609), new  BMap.Point(116.384501,39.95568), new  BMap.Point(116.384581,39.955811), new  BMap.Point(116.38468,39.955953), new  BMap.Point(116.384849,39.956206), new  BMap.Point(116.384919,39.956317), new  BMap.Point(116.385059,39.956529), new  BMap.Point(116.385079,39.95657), new  BMap.Point(116.385347,39.956974), new  BMap.Point(116.385527,39.957267), new  BMap.Point(116.385576,39.957358), new  BMap.Point(116.385626,39.957459), new  BMap.Point(116.385676,39.95757), new  BMap.Point(116.385716,39.95768), new  BMap.Point(116.385776,39.957841), new  BMap.Point(116.385806,39.958002), new  BMap.Point(116.385836,39.958162), new  BMap.Point(116.385846,39.958293), new  BMap.Point(116.385846,39.958473), new  BMap.Point(116.385856,39.958623), new  BMap.Point(116.385856,39.958623), new  BMap.Point(116.385897,39.960014), new  BMap.Point(116.385898,39.960984), new  BMap.Point(116.385908,39.961295), new  BMap.Point(116.385929,39.961865), new  BMap.Point(116.385909,39.962295), new  BMap.Point(116.38588,39.963275), new  BMap.Point(116.385831,39.963644), new  BMap.Point(116.385782,39.964123), new  BMap.Point(116.385782,39.964143), new  BMap.Point(116.385842,39.964715), new  BMap.Point(116.385903,39.965356), new  BMap.Point(116.385983,39.966067), new  BMap.Point(116.386043,39.966538), new  BMap.Point(116.386053,39.966629), new  BMap.Point(116.386133,39.96726), new  BMap.Point(116.386414,39.969935), new  BMap.Point(116.386474,39.970407), new  BMap.Point(116.386685,39.9718), new  BMap.Point(116.386805,39.972673), new  BMap.Point(116.386935,39.973505), new  BMap.Point(116.386985,39.973796), new  BMap.Point(116.386984,39.973796), new  BMap.Point(116.387035,39.974166), new  BMap.Point(116.387055,39.974317), new  BMap.Point(116.387075,39.974427), new  BMap.Point(116.387095,39.974608), new  BMap.Point(116.387175,39.975129), new  BMap.Point(116.387185,39.975199), new  BMap.Point(116.387195,39.975309), new  BMap.Point(116.387285,39.975931), new  BMap.Point(116.387385,39.976803), new  BMap.Point(116.387626,39.978957), new  BMap.Point(116.387646,39.979127), new  BMap.Point(116.387656,39.979228), new  BMap.Point(116.387736,39.979829), new  BMap.Point(116.387866,39.981111), new  BMap.Point(116.387926,39.981592), new  BMap.Point(116.388026,39.982294), new  BMap.Point(116.388016,39.982684), new  BMap.Point(116.388007,39.982864), new  BMap.Point(116.387997,39.982953), new  BMap.Point(116.387997,39.983003), new  BMap.Point(116.387997,39.983054), new  BMap.Point(116.387987,39.983333), new  BMap.Point(116.387918,39.983782), new  BMap.Point(116.387819,39.984381), new  BMap.Point(116.3877,39.984779), new  BMap.Point(116.386975,39.987338), new  BMap.Point(116.386806,39.987906), new  BMap.Point(116.386776,39.988015), new  BMap.Point(116.386727,39.988195), new  BMap.Point(116.386518,39.988971), new  BMap.Point(116.386379,39.989529), new  BMap.Point(116.386221,39.990087), new  BMap.Point(116.386012,39.990823), new  BMap.Point(116.385943,39.991072), new  BMap.Point(116.385724,39.991819), new  BMap.Point(116.385376,39.992993), new  BMap.Point(116.385347,39.993123), new  BMap.Point(116.385237,39.993471), new  BMap.Point(116.385208,39.993591), new  BMap.Point(116.385168,39.99374), new  BMap.Point(116.385128,39.993889), new  BMap.Point(116.385109,39.993939), new  BMap.Point(116.385079,39.994048), new  BMap.Point(116.384622,39.995631), new  BMap.Point(116.384552,39.99591), new  BMap.Point(116.384254,39.996995), new  BMap.Point(116.384244,39.997034), new  BMap.Point(116.383936,39.997829), new  BMap.Point(116.383906,39.997919), new  BMap.Point(116.383687,39.998425), new  BMap.Point(116.383469,39.998841), new  BMap.Point(116.38327,39.999118), new  BMap.Point(116.382982,39.999513), new  BMap.Point(116.382534,40.000135), new  BMap.Point(116.382455,40.000253), new  BMap.Point(116.382157,40.000658), new  BMap.Point(116.382067,40.000777), new  BMap.Point(116.381491,40.001506), new  BMap.Point(116.381023,40.002088), new  BMap.Point(116.380516,40.002739), new  BMap.Point(116.380188,40.003163), new  BMap.Point(116.379612,40.003902), new  BMap.Point(116.379234,40.004385), new  BMap.Point(116.378578,40.005213), new  BMap.Point(116.377942,40.006032), new  BMap.Point(116.377524,40.006564), new  BMap.Point(116.376937,40.007333), new  BMap.Point(116.376848,40.007431), new  BMap.Point(116.376789,40.00752), new  BMap.Point(116.376749,40.007559), new  BMap.Point(116.376739,40.007589), new  BMap.Point(116.376431,40.007983), new  BMap.Point(116.376043,40.008486), new  BMap.Point(116.374452,40.010616), new  BMap.Point(116.373895,40.011406), new  BMap.Point(116.373606,40.011791), new  BMap.Point(116.372303,40.013577), new  BMap.Point(116.371706,40.014386), new  BMap.Point(116.371617,40.014514), new  BMap.Point(116.37106,40.015244), new  BMap.Point(116.37097,40.015373), new  BMap.Point(116.370542,40.015935), new  BMap.Point(116.369577,40.017208), new  BMap.Point(116.369259,40.017652), new  BMap.Point(116.368711,40.018443), new  BMap.Point(116.368303,40.018946), new  BMap.Point(116.367557,40.019883), new  BMap.Point(116.36687,40.020752), new  BMap.Point(116.366183,40.02162), new  BMap.Point(116.364589,40.023695), new  BMap.Point(116.363912,40.024585), new  BMap.Point(116.363334,40.025317), new  BMap.Point(116.362975,40.025762), new  BMap.Point(116.362816,40.025959), new  BMap.Point(116.362228,40.026711), new  BMap.Point(116.361869,40.027156), new  BMap.Point(116.36164,40.027463), new  BMap.Point(116.361421,40.02776), new  BMap.Point(116.361401,40.02779), new  BMap.Point(116.361311,40.027899), new  BMap.Point(116.361304,40.027899), new  BMap.Point(116.361274,40.027948), new  BMap.Point(116.361175,40.028107), new  BMap.Point(116.361085,40.028236), new  BMap.Point(116.360995,40.028385), new  BMap.Point(116.360945,40.028474), new  BMap.Point(116.360916,40.028524), new  BMap.Point(116.360806,40.028712), new  BMap.Point(116.360706,40.028881), new  BMap.Point(116.360677,40.028941), new  BMap.Point(116.360667,40.028961), new  BMap.Point(116.360637,40.02903), new  BMap.Point(116.360597,40.02912), new  BMap.Point(116.360557,40.029199), new  BMap.Point(116.360547,40.029219), new  BMap.Point(116.360538,40.029259), new  BMap.Point(116.360518,40.029299), new  BMap.Point(116.360508,40.029338), new  BMap.Point(116.360508,40.029388), new  BMap.Point(116.360508,40.029438), new  BMap.Point(116.360508,40.029488), new  BMap.Point(116.360518,40.029539), new  BMap.Point(116.360528,40.029589), new  BMap.Point(116.360547,40.029639), new  BMap.Point(116.360577,40.029679), new  BMap.Point(116.360607,40.02972), new  BMap.Point(116.360647,40.02976), new  BMap.Point(116.360687,40.029791), new  BMap.Point(116.360726,40.029821), new  BMap.Point(116.360766,40.029841), new  BMap.Point(116.360806,40.029862), new  BMap.Point(116.360846,40.029872), new  BMap.Point(116.360896,40.029883), new  BMap.Point(116.360945,40.029894), new  BMap.Point(116.360995,40.029904), new  BMap.Point(116.361055,40.029905), new  BMap.Point(116.361115,40.029906), new  BMap.Point(116.361174,40.029907), new  BMap.Point(116.361234,40.029887), new  BMap.Point(116.361294,40.029878), new  BMap.Point(116.361354,40.029859), new  BMap.Point(116.361393,40.02984), new  BMap.Point(116.361453,40.029811), new  BMap.Point(116.361493,40.029781), new  BMap.Point(116.361533,40.029742), new  BMap.Point(116.361573,40.029692), new  BMap.Point(116.361603,40.029643), new  BMap.Point(116.361633,40.029593), new  BMap.Point(116.361643,40.029544), new  BMap.Point(116.361643,40.029504), new  BMap.Point(116.361643,40.029464), new  BMap.Point(116.361633,40.029424), new  BMap.Point(116.361623,40.029374), new  BMap.Point(116.361603,40.029323), new  BMap.Point(116.361574,40.029273), new  BMap.Point(116.361544,40.029233), new  BMap.Point(116.361504,40.029202), new  BMap.Point(116.361474,40.029172), new  BMap.Point(116.361425,40.029141), new  BMap.Point(116.361385,40.029101), new  BMap.Point(116.361325,40.02906), new  BMap.Point(116.361266,40.02904), new  BMap.Point(116.361226,40.029009), new  BMap.Point(116.361186,40.028989), new  BMap.Point(116.361147,40.028968), new  BMap.Point(116.361107,40.028948), new  BMap.Point(116.361104,40.028946), new  BMap.Point(116.360765,40.028942), new  BMap.Point(116.360676,40.028941), new  BMap.Point(116.360477,40.028939), new  BMap.Point(116.360228,40.028936), new  BMap.Point(116.359521,40.028937), new  BMap.Point(116.359292,40.028945), new  BMap.Point(116.358943,40.028951), new  BMap.Point(116.358515,40.028946), new  BMap.Point(116.358495,40.028946), new  BMap.Point(116.357638,40.028947), new  BMap.Point(116.357499,40.028946), new  BMap.Point(116.357011,40.028931), new  BMap.Point(116.356801,40.028929), new  BMap.Point(116.356792,40.028929), new  BMap.Point(116.356632,40.028928), new  BMap.Point(116.355356,40.028937), new  BMap.Point(116.355037,40.028934), new  BMap.Point(116.354628,40.028941), new  BMap.Point(116.354219,40.028938), new  BMap.Point(116.353571,40.028934), new  BMap.Point(116.353062,40.028941), new  BMap.Point(116.352872,40.02894), new  BMap.Point(116.351874,40.028934), new  BMap.Point(116.350277,40.028937), new  BMap.Point(116.347059,40.028961), new  BMap.Point(116.346519,40.028971), new  BMap.Point(116.343748,40.028925), new  BMap.Point(116.343718,40.028925), new  BMap.Point(116.343608,40.028925), new  BMap.Point(116.342968,40.028888), new  BMap.Point(116.341516,40.028704), new  BMap.Point(116.340915,40.028537), new  BMap.Point(116.340184,40.028331), new  BMap.Point(116.337588,40.02754), new  BMap.Point(116.337585,40.027539), new  BMap.Point(116.337244,40.027532), new  BMap.Point(116.336974,40.027464), new  BMap.Point(116.336522,40.027388), new  BMap.Point(116.336201,40.027321), new  BMap.Point(116.33576,40.027336), new  BMap.Point(116.335309,40.02738), new  BMap.Point(116.334907,40.027494), new  BMap.Point(116.334445,40.027659), new  BMap.Point(116.334405,40.027679), new  BMap.Point(116.333823,40.027946), new  BMap.Point(116.333311,40.028252), new  BMap.Point(116.332839,40.028617), new  BMap.Point(116.331713,40.029801), new  BMap.Point(116.331711,40.0298), new  BMap.Point(116.330726,40.031463), new  BMap.Point(116.330585,40.031744), new  BMap.Point(116.330071,40.032911), new  BMap.Point(116.330021,40.033112), new  BMap.Point(116.329437,40.035059), new  BMap.Point(116.329245,40.035672), new  BMap.Point(116.329165,40.035913), new  BMap.Point(116.329084,40.036174), new  BMap.Point(116.328984,40.036465), new  BMap.Point(116.328943,40.036576), new  BMap.Point(116.328802,40.037018), new  BMap.Point(116.328209,40.038366), new  BMap.Point(116.327716,40.039103), new  BMap.Point(116.32685,40.040136), new  BMap.Point(116.326659,40.040299), new  BMap.Point(116.325231,40.041552), new  BMap.Point(116.323168,40.043356), new  BMap.Point(116.323047,40.043468), new  BMap.Point(116.323017,40.043489), new  BMap.Point(116.322937,40.04357), new  BMap.Point(116.322806,40.043682), new  BMap.Point(116.322756,40.043733), new  BMap.Point(116.322715,40.043764), new  BMap.Point(116.322243,40.044202), new  BMap.Point(116.322233,40.044222), new  BMap.Point(116.321719,40.044821), new  BMap.Point(116.321578,40.044983), new  BMap.Point(116.320773,40.046077), new  BMap.Point(116.320451,40.046673), new  BMap.Point(116.319867,40.047743), new  BMap.Point(116.319122,40.049116), new  BMap.Point(116.31878,40.049552), new  BMap.Point(116.317048,40.051744), new  BMap.Point(116.316032,40.053022), new  BMap.Point(116.315639,40.053519), new  BMap.Point(116.313536,40.056347), new  BMap.Point(116.313365,40.05658), new  BMap.Point(116.313265,40.056712), new  BMap.Point(116.313215,40.056783), new  BMap.Point(116.313064,40.056985), new  BMap.Point(116.31242,40.058037), new  BMap.Point(116.311555,40.059442), new  BMap.Point(116.311535,40.059473), new  BMap.Point(116.311123,40.06015), new  BMap.Point(116.311118,40.06015), new  BMap.Point(116.311119,40.06048), new  BMap.Point(116.310968,40.060772), new  BMap.Point(116.310385,40.061943), new  BMap.Point(116.310334,40.062044), new  BMap.Point(116.310103,40.062488), new  BMap.Point(116.310063,40.062568), new  BMap.Point(116.310033,40.062629), new  BMap.Point(116.309309,40.064021), new  BMap.Point(116.308897,40.064488), new  BMap.Point(116.308555,40.064634), new  BMap.Point(116.308375,40.064707), new  BMap.Point(116.308244,40.064759), new  BMap.Point(116.307963,40.064834), new  BMap.Point(116.30756,40.064791), new  BMap.Point(116.306866,40.064622), new  BMap.Point(116.304856,40.064163), new  BMap.Point(116.303499,40.063863), new  BMap.Point(116.302966,40.06374), new  BMap.Point(116.302856,40.063682), new  BMap.Point(116.302854,40.063681), new  BMap.Point(116.302995,40.063199), new  BMap.Point(116.303979,40.060475), new  BMap.Point(116.303989,40.060395), new  BMap.Point(116.304079,40.060064), new  BMap.Point(116.30432,40.05918), new  BMap.Point(116.304501,40.058558), new  BMap.Point(116.304521,40.058518), new  BMap.Point(116.304662,40.058015), new  BMap.Point(116.304933,40.057151), new  BMap.Point(116.305194,40.056358), new  BMap.Point(116.305235,40.056207), new  BMap.Point(116.305325,40.055946), new  BMap.Point(116.305566,40.055212), new  BMap.Point(116.305647,40.054951), new  BMap.Point(116.305747,40.05494), new  BMap.Point(116.305717,40.05502), new  BMap.Point(116.305717,40.055019), new  BMap.Point(116.305647,40.05523), new  BMap.Point(116.305416,40.055964), new  BMap.Point(116.305295,40.056375), new  BMap.Point(116.305034,40.057169), new  BMap.Point(116.304773,40.058033), new  BMap.Point(116.304772,40.058033), new  BMap.Point(116.306491,40.058347), new  BMap.Point(116.306492,40.058347), new  BMap.Point(116.306914,40.05729), new  BMap.Point(116.306954,40.05717), new  BMap.Point(116.306954,40.05717), new  BMap.Point(116.306974,40.057169)];
             //    map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
                 map.setViewport(arrPois);
                    marker= new  BMap.Marker(arrPois[0],{
                       icon  :  new  BMap.Icon( 'http://developer.baidu.com/map/jsdemo/img/car.png' new  BMap.Size(52,26),{anchor :  new  BMap.Size(27, 13)})
                    });
       var  label =  new  BMap.Label( "粤A30780" ,{offset: new  BMap.Size(0,-30)});
       label.setStyle({border: "1px solid rgb(204, 204, 204)" ,color:  "rgb(0, 0, 0)" ,borderRadius: "10px" ,padding: "5px" ,background: "rgb(255, 255, 255)" ,});
                 marker.setLabel(label);
                 
       map.addOverlay(marker);
      BMapLib.LuShu.prototype._move= function (initPos,targetPos,effect) {
             var  pointsArr=[initPos,targetPos];   //点数组
             var  me =  this ,
                 //当前的帧数
                 currentCount = 0,
                 //步长,米/秒
                 timer = 10,
                 step =  this ._opts.speed / (1000 / timer),
                 //初始坐标
                 init_pos =  this ._projection.lngLatToPoint(initPos),
                 //获取结束点的(x,y)坐标
                 target_pos =  this ._projection.lngLatToPoint(targetPos),
                 //总的步长
                 count = Math.round(me._getDistance(init_pos, target_pos) / step);
                  //显示折线 syj201607191107
             this ._map.addOverlay( new  BMap.Polyline(pointsArr, { 
                 strokeColor :  "#111"
                 strokeWeight : 5, 
                 strokeOpacity : 0.5 
             }));  // 画线 
             //如果小于1直接移动到下一点
             if  (count < 1) {
                 me._moveNext(++me.i);
                 return ;
             }
             me._intervalFlag = setInterval( function () {
             //两点之间当前帧数大于总帧数的时候,则说明已经完成移动
                 if  (currentCount >= count) {
                     clearInterval(me._intervalFlag);
                     //移动的点已经超过总的长度
                     if (me.i > me._path.length){
                         return ;
                     }
                     //运行下一个点
                     me._moveNext(++me.i);
                 } else  {
                         currentCount++;
                         var  x = effect(init_pos.x, target_pos.x, currentCount, count),
                             y = effect(init_pos.y, target_pos.y, currentCount, count),
                             pos = me._projection.pointToLngLat( new  BMap.Pixel(x, y));
                         //设置marker
                         if (currentCount == 1){
                             var  proPos =  null ;
                             if (me.i - 1 >= 0){
                                 proPos = me._path[me.i - 1];
                             }
                             if (me._opts.enableRotation ==  true ){
                                  me.setRotation(proPos,initPos,targetPos);
                             }
                             if (me._opts.autoView){
                                 if (!me._map.getBounds().containsPoint(pos)){
                                     me._map.setCenter(pos);
                                 }  
                             }
                         }
                         //正在移动
                         me._marker.setPosition(pos);
                         //设置自定义overlay的位置
                         me._setInfoWin(pos);  
                     }
             },timer);
         };
                 lushu =  new  BMapLib.LuShu(map,arrPois,{
                 defaultContent: "粤A30780" , //"从天安门到百度大厦"
                 autoView: true , //是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
                 icon  :  new  BMap.Icon( 'http://developer.baidu.com/map/jsdemo/img/car.png' new  BMap.Size(52,26),{anchor :  new  BMap.Size(27, 13)}),
                 speed: 4500,
                 enableRotation: true , //是否设置marker随着道路的走向进行旋转
                    landmarkPois:[
                    {lng:116.306954,lat:40.05718,html: '加油站' ,pauseTime:2}
                   ]
                    
                 }); 
         
       marker.addEventListener( "click" , function (){
         marker.enableMassClear();    //设置后可以隐藏改点的覆盖物
         marker.hide();
         lushu.start();
         //map.clearOverlays();  //清除所有覆盖物
       });
             //}
//        }
   //  });
     //drv.search('天安门', '百度大厦');
      // lushu.start();
      // lushu.pause();
     //绑定事件
     $( "run" ).onclick =  function (){
       marker.enableMassClear();  //设置后可以隐藏改点的覆盖物
       marker.hide();
       lushu.start();
      // map.clearOverlays();    //清除所有覆盖物
     }
     $( "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);
     }
</script>
</body>
</html>

  其中,arrPois的点是自定义点,非常适合做轨迹回放用.

  注意:landmarkPois 必须要定义,如果没有要显示的点话,就写成[],不能为空,否则会无法运行.

  实现边走边画线,首先将百度路书中的画线代码注释掉,然后重写_move方法,参见代码中的重写_move方法.基于此可以实现更加复杂的各种附加信息.

  其效果如下图:

  

  也算是给后人留点启发吧

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值