<!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. asp.net Core MVC + webpack 笔记

    webpack 是一个打包工具,用在asp.net Core MVC 会觉得有必要吗? MVC 本身就有bundler~ 如果用过webpack就会知道,打包出来的效果结果就是不一样,MVC的打包就是 ...

  2. ISO 8859-1 对照表 （扩展ASCII码表）

    1. 0---127 是ASCII码 2.128--255 加了一些特殊符号 DEC OCT HEX BIN Symbol HTML Number HTML Name Description 128 ...

  3. java后台读取/解析 excel表格

    需求描述 前台需要上传excel表格,提交到后台,后台解析并返回给前台,展示在前台页面上! 前台部分代码与界面 <th style="padding: 7px 1px;width:15 ...

  4. 3-9《元编程》第3章Tuesday:methods

    第3章methods Ruby是动态语言,有静态语言实现不了的技巧.本章讲解代码的重构,把代码变得更简洁. 3.2Dynamic Methods 3.21Calling Methods Dynamic ...

  5. 卸载 PrestaShop 1.7

    PrestaShop 的卸载非常简单: 在你的 Web 服务器上删除所有 PrestaShop 的文件和目录.你可以使用 FTP 客户端,你也可以使用 SSH 工具. 使用数据库工具删除数据库中所有以 ...

  6. 原生js实现倒计时

    html代码: <div class="box">距离下班还有:<span>01:01:30</span></div> css代码: ...

  7. PC端，移动端分离，如何结合？？

    <script type="text/javascript"> function mobile_device_detect(url) { var thisOS = na ...

  8. 『cs231n』作业2选讲_通过代码理解优化器

    1).Adagrad一种自适应学习率算法,实现代码如下: cache += dx**2 x += - learning_rate * dx / (np.sqrt(cache) + eps) 这种方法的 ...

  9. 硬盘分区表知识——详解硬盘MBR (转)

    Ref: http://www.blogjava.net/galaxyp/archive/2010/04/25/319344.html 硬盘是现在计算机上最常用的存储器之一.我们都知道,计算机之所以神 ...

  10. JS-图片控制-动画管理模块

    animateManage.js ;(function(window,document,undefined){ var _aniQueue = [], //动画队列 --- ani:动画,Queue: ...