百度地图API 绘制轨迹历史

Posted 2021-02-03 弃身锋刃端！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图API 绘制轨迹历史相关的知识，希望对你有一定的参考价值。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6     <style type="text/css">
  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 src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 11    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=8PBGIzcngFtMIdnWIX9ZrBr2ZjWN0ejT"></script>
 12 
 13     <title>车辆运行轨迹测试</title>
 14     </head>
 15 <body>
 16 <input id="allmap_value" value="" style="display:none;">
 17 <div id="allmap"></div>
 18 </body>
 19 </html>
 20 <script type="text/javascript">
 21 $(function(){
 22 //初始化
 23 drawGreenAddress(0,"red",4);
 24 //show_mycat($("#allmap_value").val(),list[index].Long,list[index].Lat);
 25 })
 26 
 27     var timer;     //定时器
 28     var index = 0; //记录播放到第几个point
 29     var list = [
 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     var listLast = list.length-1;
 38     // 百度地图API功能
 39     var map = new BMap.Map("allmap");    // 创建Map实例
 40     map.addControl(new BMap.NavigationControl());
 41     map.addControl(new BMap.ScaleControl());
 42     map.addControl(new BMap.OverviewMapControl({isOpen: true}));
 43     map.centerAndZoom(new BMap.Point(list[0].Long,list[0].Lat), 15);  // 初始化地图,设置中心点坐标和地图级别
 44     map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
 45     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
 46     
 47     setTimeout(drawIcon,500);
 48     var carMk;
 49     var myBeginIcon = new BMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人
 50     var myEndIcon = new BMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人
 51     
 52     //show_mycat("这里是地址",106.652024,26.617221);
 53     //展示bd地址
 54     var car = "";
 55     function show_mycat(address,long,lat){
 56     
 57         if(car) map.removeOverlay(car)
 58         label = new BMap.Label(address, {offset: new BMap.Size(-20, -20)});
 59         car = new BMap.Marker(new BMap.Point(long,lat));
 60         car.setLabel(label);
 61         map.addOverlay(car);
 62         map.panTo(new BMap.Point(long, lat));
 63         
 64     }    
 65     
 66     //显示原始路线
 67     function drawGreenLine(i,color,weitht){
 68          
 69         var polyline = new BMap.Polyline([
 70             new BMap.Point(list[i].Long,list[i].Lat),//起始点的经纬度
 71             new BMap.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      function drawGreenAddress(i,color,weitht){
 81 
 82         if(i%2==0){ //不能太频繁请求百度地址,这里可能会改大
 83             var geoc = new BMap.Geocoder(); 
 84             geoc.getLocation(new BMap.Point(list[i].Long,list[i].Lat),function(rs){ 
 85             var addComp = rs.addressComponents; 
 86             address =  addComp.province + addComp.city  + addComp.district + addComp.street  + addComp.streetNumber;
 87             $("#allmap_value").val(address)
 88             }); 
 89         }
 90     }
 91     
 92     function lineAddress(i,color,weitht){
 93         drawGreenLine(i,color,weitht)
 94         drawGreenAddress(i,color,weitht)
 95     }
 96     
 97     function drawIcon(){
 98         if(carMk){
 99             map.removeOverlay(carMk);
100         }
101         carMk2 = new BMap.Marker(
102                 new BMap.Point(list[0].Long,list[0].Lat),//起始点的经纬度
103                 {icon:myBeginIcon});
104         map.addOverlay(carMk2);
105  
106         carMk = new BMap.Marker(
107                 new BMap.Point(list[listLast].Long,list[listLast].Lat),//终点的经纬度
108                 {icon:myEndIcon});
109         map.addOverlay(carMk);
110  
111         for(var i=0;i<list.length-1;i++){
112          
113             drawGreenLine(i,"green",4);
114         }
115  
116     }
117     
118     //停止
119 function stop() {
120  
121     if(timer) {
122         window.clearTimeout(timer);
123     }
124 }
125 //运行地图轨迹
126     function play(){
127      if(index < listLast){
128         lineAddress(index,"red",2);
129         //显示地址
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>

效果图

执行play() 方法可根据经纬度跑地图

以上是关于百度地图API 绘制轨迹历史的主要内容，如果未能解决你的问题，请参考以下文章

百度地图API，根据经纬度实现车辆移动轨迹绘制