DOCTYPE html>

2

3

4

5

6

7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family:"微軟雅黑";}

8 #allmap{width:100%;height:100%;overflow:hidden;margin:0;font-family:"微軟雅黑";}

9 style>

10 script>

11 script>

12

13

車輛運行軌跡測試title>

14 head>

15

16

17 div>

18 body>

19 html>

20

21 $(function(){22 //初始化

23 drawGreenAddress(0,"red",4);24 //show_mycat($("#allmap_value").val(),list[index].Long,list[index].Lat);

25 })26

27 vartimer;//定時器

28 varindex= 0;//記錄播放到第幾個point

29 varlist=[30 {Long:106.652024,Lat:26.617221},31 {Long:106.652886,Lat:26.614185},32 {Long:106.652527,Lat:26.614314},33 {Long:106.652743,Lat:26.609469},34 {Long:106.654324,Lat:26.607531},35 {Long:106.65612,Lat:26.602556},36 ];37 varlistLast=list.length-1;38 //百度地圖API功能

39 varmap= newBMap.Map("allmap");//創建Map實例

40 map.addControl(newBMap.NavigationControl());41 map.addControl(newBMap.ScaleControl());42 map.addControl(newBMap.OverviewMapControl({isOpen:true}));43 map.centerAndZoom(newBMap.Point(list[0].Long,list[0].Lat),15);//初始化地圖,設置中心點坐標和地圖級別

44 map.addControl(newBMap.MapTypeControl());//添加地圖類型控件

45 map.enableScrollWheelZoom(true);//開啟鼠標滾輪縮放

46

47 setTimeout(drawIcon,500);48 varcarMk;49 varmyBeginIcon= newBMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg",newBMap.Size(25,37), {imageOffset:newBMap.Size(0,0)});//人

50 varmyEndIcon= newBMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg",newBMap.Size(25,37), {imageOffset:newBMap.Size(0,0)});//人

51

52 //show_mycat("這里是地址",106.652024,26.617221);

53 //展示bd地址

54 varcar= "";55 functionshow_mycat(address,long,lat){56

57 if(car) map.removeOverlay(car)58 label= newBMap.Label(address, {offset:newBMap.Size(-20,-20)});59 car= newBMap.Marker(newBMap.Point(long,lat));60 car.setLabel(label);61 map.addOverlay(car);62 map.panTo(newBMap.Point(long, lat));63

64 }65

66 //顯示原始路線

67 functiondrawGreenLine(i,color,weitht){68

69 varpolyline= newBMap.Polyline([70 newBMap.Point(list[i].Long,list[i].Lat),//起始點的經緯度

71 newBMap.Point(list[i+1].Long,list[i+1].Lat)//終點的經緯度

72 ], {strokeColor:color,//設置顏色

73 strokeWeight:weitht,//寬度

74 strokeOpacity:1});//透明度

75 map.addOverlay(polyline);76

77 }78

79 //獲取路線

80 functiondrawGreenAddress(i,color,weitht){81

82 if(i%2==0){//不能太頻繁請求百度地址,這里可能會改大

83 vargeoc= newBMap.Geocoder();84 geoc.getLocation(newBMap.Point(list[i].Long,list[i].Lat),function(rs){85 varaddComp=rs.addressComponents;86 address=addComp.province+addComp.city+addComp.district+addComp.street+addComp.streetNumber;87 $("#allmap_value").val(address)88 });89 }90 }91

92 functionlineAddress(i,color,weitht){93 drawGreenLine(i,color,weitht)94 drawGreenAddress(i,color,weitht)95 }96

97 functiondrawIcon(){98 if(carMk){99 map.removeOverlay(carMk);100 }101 carMk2= newBMap.Marker(102 newBMap.Point(list[0].Long,list[0].Lat),//起始點的經緯度

103 {icon:myBeginIcon});104 map.addOverlay(carMk2);105

106 carMk= newBMap.Marker(107 newBMap.Point(list[listLast].Long,list[listLast].Lat),//終點的經緯度

108 {icon:myEndIcon});109 map.addOverlay(carMk);110

111 for(vari=0;i

113 drawGreenLine(i,"green",4);114 }115

116 }117

118 //停止

119 functionstop() {120

121 if(timer) {122 window.clearTimeout(timer);123 }124 }125 //運行地圖軌跡

126 functionplay(){127 if(index

130 show_mycat($("#allmap_value").val(),list[index+1].Long,list[index+1].Lat);131

132 timer=window.setTimeout("play(" +index+ ",'red',2)",500);133 index++;134

135 }136

137 }138

139

140 script>

總結

以上是生活随笔為你收集整理的百度地图描绘轨迹html,百度地图API 绘制轨迹历史的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。