百度地图API 绘制轨迹历史

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

     <style type="text/css">

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

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

     </style>

     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=8PBGIzcngFtMIdnWIX9ZrBr2ZjWN0ejT"></script>

     <title>车辆运行轨迹测试</title>

     </head>

 <body>

 <input id="allmap_value" value="" style="display:none;">

 <div id="allmap"></div>

 </body>

 </html>

 <script type="text/javascript">

 $(function(){

 //初始化

 drawGreenAddress(0,"red",4);

 //show_mycat($("#allmap_value").val(),list[index].Long,list[index].Lat);

 })

     var timer;     //定时器

     var index = 0; //记录播放到第几个point

     var list = [

     {Long:106.652024,Lat:26.617221},

     {Long:106.652886,Lat:26.614185},

     {Long:106.652527,Lat:26.614314},

     {Long:106.652743,Lat:26.609469},

     {Long:106.654324,Lat:26.607531},

     {Long:106.65612,Lat:26.602556},

 ];

     var listLast = list.length-1;

     // 百度地图API功能

     var map = new BMap.Map("allmap");    // 创建Map实例

     map.addControl(new BMap.NavigationControl());

     map.addControl(new BMap.ScaleControl());

     map.addControl(new BMap.OverviewMapControl({isOpen: true}));

     map.centerAndZoom(new BMap.Point(list[0].Long,list[0].Lat), 15);  // 初始化地图,设置中心点坐标和地图级别

     map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

     setTimeout(drawIcon,500);

     var carMk;

     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)});//人

     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)});//人

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

     //展示bd地址

     var car = "";

     function show_mycat(address,long,lat){

         if(car) map.removeOverlay(car)

         label = new BMap.Label(address, {offset: new BMap.Size(-20, -20)});

         car = new BMap.Marker(new BMap.Point(long,lat));

         car.setLabel(label);

         map.addOverlay(car);

         map.panTo(new BMap.Point(long, lat));

     }    

     //显示原始路线

     function drawGreenLine(i,color,weitht){

         var polyline = new BMap.Polyline([

             new BMap.Point(list[i].Long,list[i].Lat),//起始点的经纬度

             new BMap.Point(list[i+1].Long,list[i+1].Lat)//终点的经纬度

         ], {strokeColor:color,//设置颜色

             strokeWeight:weitht, //宽度

             strokeOpacity:1});//透明度

         map.addOverlay(polyline);

     }

     //获取路线

      function drawGreenAddress(i,color,weitht){

         if(i%2==0){ //不能太频繁请求百度地址,这里可能会改大

             var geoc = new BMap.Geocoder();

             geoc.getLocation(new BMap.Point(list[i].Long,list[i].Lat),function(rs){

             var addComp = rs.addressComponents;

             address =  addComp.province + addComp.city  + addComp.district + addComp.street  + addComp.streetNumber;

             $("#allmap_value").val(address)

             });

         }

     }

     function lineAddress(i,color,weitht){

         drawGreenLine(i,color,weitht)

         drawGreenAddress(i,color,weitht)

     }

     function drawIcon(){

         if(carMk){

             map.removeOverlay(carMk);

         }

         carMk2 = new BMap.Marker(

                 new BMap.Point(list[0].Long,list[0].Lat),//起始点的经纬度

                 {icon:myBeginIcon});

         map.addOverlay(carMk2);

         carMk = new BMap.Marker(

                 new BMap.Point(list[listLast].Long,list[listLast].Lat),//终点的经纬度

                 {icon:myEndIcon});

         map.addOverlay(carMk);

         for(var i=0;i<list.length-1;i++){

             drawGreenLine(i,"green",4);

         }

     }

     //停止

 function stop() {

     if(timer) {

         window.clearTimeout(timer);

     }

 }

 //运行地图轨迹

     function play(){

      if(index < listLast){

         lineAddress(index,"red",2);

         //显示地址

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

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

         index++;

      }

     }

 </script>

效果图

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

百度地图API 绘制轨迹历史的更多相关文章

百度地图api描绘车辆历史轨迹图
最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能一开始使用了google的地图api,但是发现会一直关闭,索性支持下国产,使用了百度地图api search方法把两个点连接成线后,会出现起 ...
使用百度地图API实现轨迹回放
调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...
百度地图API绘制带头箭头的折线
源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...
百度地图API，根据经纬度实现车辆移动轨迹绘制
百度地图,实现车辆轨迹绘制实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...
记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...
web端百度地图API实现实时轨迹动态展现
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...
百度地图api简单使用方法
百度地图API的使用方法百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

随机推荐

C#中的？
1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; 是正确的,int i=null; 编译器就会报错.为了使值类型也 ...
Java中泛型使用
Java中泛型使用泛型作用: 泛型:集合类添加对象不用强转反射机制:将泛型固定的类的所有方法和成员全部显示出来核心代码: ArrayList<Ls> ff=new ArrayList ...
codeforces 497b// Tennis Game// Codeforces Round #283(Div. 1)
题意:网球有一方赢t球算一场,先赢s场的获胜.数列arr(长度为n)记录了每场的胜利者,问可能的t和s. 首先,合法的场景必须: 1两方赢的场数不一样多. 2赢多的一方最后一场必须赢. 3最后一场必须 ...
Matlab scatter 如何显示不同颜色点状
有时候需要在matlab scatter绘图中显示不同颜色区分,如下图是人体血压高压.低压与年龄关系的散点图. 红色点表示高压绿色点表示低压用 matlab 如何实现呢? 1.创建一维矩阵x,y1 ...
绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解
在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...
关于初级dp的一些记忆
01背包和数塔都是寒假看的,数塔还算明白,但01背包虽然会做其实也是背下来的,一直不是很清楚它的可行性,昨天老师讲了以后恍然大悟,和数塔类似生成了一颗二叉树: 利用数组/dfs 自下而上/自上而下 ...
每天一个linux命令（3）：pwd
Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. ...
windows下面使用nginx配置web注意问题
1.路径一定要用两个反斜杠进行转义,如果只用单个反斜杠,遇到\n就识别不到路径了,例如下图中的\news中包含\n
vue-cli的安装及使用
一. node 和npm 1.在安装vue-cli前,要确认自己的电脑是否安装了node和npm 2.查询版本如下(vue脚手架支持node@4.xx以上) node -v 查询node版 ...
vs2012团队连接（Team Foundation Server）怎样从已登录的用户退出
在用visual studio 连接团队项目时,首次输入用户名和密码后,默认保存住凭据了,等以后连接会自动采用首次的凭证. 但是如何采用新的用户重新登录呢解决方法有两个: 1.删除原有账号登陆的凭证 ...

百度地图API 绘制轨迹历史

百度地图API 绘制轨迹历史的更多相关文章

随机推荐

热门专题