<!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 绘制轨迹历史的更多相关文章

  1. 百度地图api描绘车辆历史轨迹图

    最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能 一开始使用了google的地图api,但是发现会一直关闭,索性支持下国产,使用了百度地图api search方法把两个点连接成线后,会出现起 ...

  2. 使用百度地图API实现轨迹回放

    调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...

  3. 百度地图API绘制带头箭头的折线

    源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  4. 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

    原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...

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

    百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...

  6. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  7. 【百度地图API】北京周边7日游——图标按路线轨迹行动

    原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

  8. web端百度地图API实现实时轨迹动态展现

    最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...

  9. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

随机推荐

  1. android--------volley之网络请求和图片加载

    Volley是 Google 推出的 Android 异步网络请求框架和图片加载框架. Volley的特性 封装了的异步的请求API.Volley 中大多是基于接口的设计,可配置性强. 一个优雅和稳健 ...

  2. Android动画（Animations）

    动画类型Android的animation由四种类型组成 XML中 alpha  : 渐变透明度动画效果 scale  :渐变尺寸伸缩动画效果 translate  : 画面转换位置移动动画效果 ro ...

  3. Jamie and Binary Sequence (changed after round) CodeForces - 916B (贪心)

    链接 大意: 求将n划分为k个2的幂的和, 且最大幂最小,字典序尽量大 比较简单的贪心练习题, 但放在div2的B题感觉偏难了..... 先只考虑最大幂最小, 首先注意到直接按n的二进制划分即可得到最 ...

  4. hdu-5492-dp

    Find a path Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. secureCRT启动xmanager图形化工具

    secureCRT启动xmanager图形化工具 2014年9月17日 11:42 secureCRT是我们在维护UNIX或者linux的重要工具.xmanager 工具是连接UNIX或者linux的 ...

  6. 将 HttpPostedFile 转换成 Image 或者 Bitmap

    代码如下: HttpFileCollection httpfiles = context.Request.Files; files = httpfiles[i]; Image im = Image.F ...

  7. OAF中trunc函数的使用(转)

    原文地址:OAF中trunc函数的使用 需求:在做OAF开发时,经常会需要查询功能,由于需求的不同,往往不能使用OAF标准的查询功能,需要自己客户化实现查询功能,而在查询功能中,经常会遇到查询的时间范 ...

  8. HTML <a> 标签的伪类

    伪类的语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用. selector.class : pseudo-class {prop ...

  9. POJ 1847 dijstra算法

    POJ 无限循环CE中.感觉是读题难.然后就可以建图上模板了. 附个人代码: #include<stdio.h>#include<string.h>#include<io ...

  10. Openwrt Support MINI-PCIE EC20 (6)

    1      Scope of Document This document describes MINI PCIE usb hardware design, for EC20 4G module 2 ...