码迷,mamicode.com
首页 > Windows程序 > 详细

使用百度地图API制作线路轨迹播放

时间:2015-08-17 00:56:48      阅读:8038      评论:0      收藏:0      [点我收藏+]

标签:

1.使用百度地图API制作轨迹播放;

可应用于车辆跟踪、行驶线路回放、跑步行程的记录等地图应用场景,

1.1绘制静态轨迹图

获取多个轨迹点point(必须包含经度、纬度)

使用polyline对象依次连接相邻的2个点(注意polyline的个数比point的少1)

1.2绘制动态轨迹图(固定间隔时间)

每隔500毫秒读取一个轨迹点,实现a,b两个功能

a增加一条polyline

b将marker从先前的point移到当前点

主方法使用setTimeout方法迭代来实现动态循环

Polyline在每条迭代循环体中添加即可,marker的移动则可以通过2中方法来实现:

一、使用removeOverlay除去原marker并在当前point处添加新marker

这是当时做项目时想到的方法,由于先前绘制polyline时使用addOverlay的思维惯性,在绘制marker时也就继续使用了addOverlay做循环迭代。

window.run = function (){

                     var pts ={?????}//你获取到的一系列点的数组(通过gps或其他接口)

                     var paths = pts.length;    //获得有几个点

                     var carMk = new BMap.Marker(pts[0],{icon:myIcon});

                     map.addOverlay(carMk);

                     i=0;

                     function removeMkPoint(i){

                            if(i < paths){//

                                   setTimeout(function(){

                                          i++;

map.removeOverlay(carMk);//清除前一个marker

                                          removeMkPoint(i);

                                   },100);

                            }

                     }

                     setTimeout(function(){

                            resetMkPoint(5);

                     },100)

 

              });

       }

 

       setTimeout(function(){

              run();

       },1500);

二、使用marker的setPosition方法重新设置marker的位置

在项目完成后,我又读了一篇百度api的文档,发现官方demo中使用setPosition方法能很好地实现marker的移动功能

window.run = function (){

                     var pts ={?????}//你获取到的一系列点的数组(通过gps或其他接口)

                     var paths = pts.length;    //获得有几个点

                     var carMk = new BMap.Marker(pts[0],{icon:myIcon});

                     map.addOverlay(carMk);

                     i=0;

                     function resetMkPoint(i){

                            carMk.setPosition(pts[i]);//重新设置marker的position

                            if(i < paths){

                                   setTimeout(function(){

                                          i++;

                                          resetMkPoint(i);

                                   },100);

                            }

                     }

                     setTimeout(function(){

                            resetMkPoint(5);

                     },100)

 

              });

       }

 

       setTimeout(function(){

              run();

       },1500);

注意:marker的opts属性能自定义marker的icon(汽车、人等图标)、旋转方向、大小、偏移等等属性,另外setAnimation方法还能设置动画效果。

1.3绘制polyline

轨迹线路是由一个一个polyline首尾相连组合起来的,因此,只需要在每次添加marker时添加一个polyline即可,并且在下一轮迭代循环中不需要清除,每条polyline的首尾2个端点就是当前点和上一个时间段的点

      var pts0,前一个点 var pts1当前点

                        var carPl=new BMap.Polyline([pts0,pts1],{strokeColor:‘blue‘,strokeWeight:4,strokeOpacity:0.8});

                        map.addOverlay(carPl);

pts0=pts1;//每次添加polyline后当前点变为前一个点

 

 

1.4添加播放按钮控件控制轨迹播放

添加自定义的播放控件,这里需要使用prototype属性来返回对象类型原型的引用,        这里给出prototype的理解

例如:A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。这里强调的是克隆而不是继承,其区别在于:A的prototype是B的实例,同时B的prototype也可能是A的实例。

A能使用B的方法和属性,当A、B中都有方法名为f的方法时,A的实例instance调用这个f方法(instance.f)会是A自生的f方法而不是B的f方法,如果A的实例instance想调用B的f方法,需要使用call方法来实现:先new一个B的实例var Binstance=new B(); Binstance.f.call(instance);

 

            function PlayControl(){

                // 默认停靠位置和偏移量

                this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;

                this.defaultOffset = new BMap.Size(10, 40);

            }

            // 通过JavaScript的prototype属性继承于BMap.Control

            PlayControl.prototype = new BMap.Control();

            // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回

            // 在本方法中创建个input元素作为控件的容器,并将其添加到地图容器中

            PlayControl.prototype.initialize = function(map){

                // 创建一个DOM元素

                var input = document.createElement("input");

                input.id="playCtrl";

                input.type="image";

                input.src="image/play.png";

                input.onclick=startPlay();//startPlay为上一步开始执行setTimeout迭代

                };

                // 添加DOM元素到地图中

                map.getContainer().appendChild(input);

                // 将DOM元素返回

                return input;

            };

            // 创建控件

            var myPlayCtrl = new PlayControl();

            // 添加到地图当中

            map.addControl(myPlayCtrl);

 

 

1.5将播放按钮设计为可以单击切换播放和停止的按钮

   定义一个变量var i=0,在onclick事件触发时,将i在0和1之间不停切换,根据i的值来判断执行开始播放方法和停止方法。

   停止播放方法可以通过clearTimeout(timer)来实现(前提是在前面的开始播放方法中将setTimeout语句作为字符串赋值为timer),并使用removeOverlay来清除播放过程中出现的痕迹。

input.onclick=function(){

                    if(i==0){

                        startPlay();//播放开始

                        input.src="image/pause.png";

                        i=1;

                    }else{

                        pausePlay();//播放停止

                        input.src="image/play.png";

                        i=0;

                    }

 

                };

1.6添加播放速度控件

   上一步添加了播放开关,还可以在此基础上添加播放速度的控件来调节播放的快慢

   其方法与1.4中添加播放开关的方法类似,其中input的type为range(html 5中新的类型),通过读取range 的value,将value作为setTimeout的时间参数(作为参数传入播放方法),

 

注意:当滑动range,value发生改变时,要使播放停止,再次点击播放按钮时,播放方法读取新的value;

                input.id="speedCtrl";

                input.type="range";

                input.max="1750";

                input.min="250";

                input.step="250";

                input.value="1000";

                var i=0;

                input.onchange=function(){

                    pausePlay();

                }

总结:

作为一个从学校里刚走出来的非计算机专业的前端新手,实习中的第一次上手项目,就有独立使用百度地图API的机会实在幸运。从百度地图API的具体使用实践中,我学到了很多,除了百度地图API以外,还学到了包括prototype、bootstrap(模态框、datetimepicker、validation等插件)等等。

尽管有些不太完善的地方(例如:在infoWindow的content中不能使用bootstrap的模态框等),但百度地图API的功能仍然十分强大,值得广大新手学习。特别是随着移动互联网的快速发展以及各种带有gps定位功能的智能设备的爆发式普及,地图、定位类使用场景越来越多,地图API的使用需求也将越来越多。

为了更好地练习百度地图,我打算利用节假日空闲的时间使用百度地图制作一个小游戏练手,游戏大致构思如下:(未来会在博客中向大家展示!)

1.使用自定义marker作为游戏主角

2.使用自定义控件来操作主角

3.设置关卡或任务,

4.计算奖励或得分

5.设置障碍

    先实现这几个初级功能需求,就可以使自己的游戏主角在自己的城市中行走了!

 

使用百度地图API制作线路轨迹播放

标签:

原文地址:http://www.cnblogs.com/feleventh/p/4735361.html

(0)
(3)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!