转自：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方法.基于此可以实现更加复杂的各种附加信息.

　　其效果如下图:

　　

　　也算是给后人留点启发吧

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

  1. 百度地图历险记之LuShu路书全解

    百度地图历险记之LuShu路书全解 项目简介: 接了个双创项目的前端开发的活,主要用地图来展示一些信息,比如时间地点事件什么的.使用了Antd+react解决方案. 欢迎点个star支持下:思源siy ...

  2. Vue百度地图轨迹回放

    html: <template><div id="carpath"><div id="handle"><el-butt ...

  3. android高德地图轨迹偏纠,GitHub - YangHaoyi/DrawTraceDemo: 高德地图轨迹回放带定位纠偏加彩虹渐变线...

    DrawTraceDemo 高德地图轨迹回放带定位纠偏加彩虹渐变线 由于高德自身持续定位存在偏移状况,故摒弃了高德自身的定位点,改用自定义marker点作为定位点 加注轨迹纠偏函数,根据时间判定此次移 ...

  4. Vue Baidu Map 实现Vue版本地图轨迹回放（App端）

    Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...

  5. 高德地图轨迹回放功能

    一.介绍        在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...

  6. uniapp地图轨迹回放

    uniapp地图轨迹回放 欢迎使用ay-contrail插件 最近有需求为:在地图上展示一些点的轨迹,按时间先后顺序回放.已实现任意多点的轨迹回放,整理插件代码如下: 1.ay-contrail插件 ...

  7. 微信小程序map地图轨迹回放的问题

    map地图轨迹回放报FaceTo的错误 如果你的轨迹回放报出这个错误,那么你可能和我一样,是在轨迹回放还未结束的时候或者说是还没有到一个点停止的时候就更新了新的位置信息,想让地图重新的渲染并执行. 这 ...

  8. Android实现高德地图轨迹回放

    Android实现高德地图轨迹回放 写在前面 准备 官方文档解读 创建应用: 地图api引入: 权限添加 效果展示 过程实现 地图初始化 定位 显示标记点 点平滑移动 添加呼吸点 写在结尾 写在前面 ...

  9. 关于地图轨迹回放的一点小研究

    大家在做交通相关业务时,不可避免的要用到轨迹回放的相关功能,即根据一段时间内的GPS轨迹点来绘制车辆行驶的轨迹,下面结合自己做所项目相关业务以及自己的相关总结,说说轨迹回放相关功能实现. setTim ...

最新文章

  1. 12篇文章带你进入NLP领域，掌握核心知识
  2. 【java】java工具类StringUtils,org.apache.commons.lang3.StringUtils
  3. 配置JDK时发生'javac'不是内部或外部命令的现象与解决过程
  4. c语言程序设计的顺序结构的常用控制语句,C语言程序设计教程-第03课-顺序结构的程序设计.ppt...
  5. python numpy库是第三方库吗_浅谈python的第三方库——numpy（终）
  6. 案例 银行取款 java 1615136927
  7. 【TensorFlow】TensorFlow从浅入深系列之九 -- 教你认识图像识别中经典数据集
  8. 一基于Fourinone实现分布式计算上手demo
  9. cgroup学习（五）—— create new cgroup
  10. ISIS metric
  11. 诗经 - 小雅 -采薇
  12. 一个程序员的成长之路
  13. 【转载】Kali Linux 64位架构安装Veil-Evasion
  14. Android Native 崩溃日志收集
  15. 【分析】RBD Mirroring - 原理、概念、命令
  16. 数论-杨辉三角和二项式定理
  17. audioread函数用法（matlab）
  18. matlab求线性方程组的符号解,符号代数线性方程组的MATLAB求解.PPT
  19. Python图片读写方式之OpenCV 图像算术运算
  20. 红米note5linux刷机包_红米Note5线刷刷机教程_红米Note5官方固件rom原版刷机包

热门文章

  1. 2022-2028年中国防臭袜行业投资分析及前景预测报告
  2. Go 知识点（05）— 类型别名与类型定义
  3. Python 将字符串转为字典
  4. oracle sqlserver 查看指定用户下面的表
  5. 矩阵的卷积核运算（一个简单小例子的讲解）深度学习
  6. LeetCode简单题之将每个元素替换为右侧最大元素
  7. Linux 内核，30 年C 语言将升级至 C11
  8. GPU上稀疏矩阵的基本线性代数
  9. 使用IDEA开发Servlet程序
  10. 2021年大数据常用语言Scala（三十四）：scala高级用法 异常处理