如题所述：百度的编辑界面很直观，修改后就可以运行，地址：http://developer.baidu.com/map/jsdemo.htm#c2_8；

因为同事研究了一下午结果都没搞出来，他copy百度示例的代码写的很混乱，贴来贴去的，结果把自己陷进去了，看到如此情形实在不忍心啊，（毕竟是demo，百度提供的代码大可以大刀阔斧的修改，不用吝啬）于是就参与了进去。先看API，然后看示例分析，必须要修改生成自己的轨迹线，如果能找到回到函数对轨迹数据进行自定义问题就解决了，果不其然就是这样的。关键还是修改onSearchComplete函数的回调结果中arrPois修改为自己GPS经纬度位置集合就可以了。代码如下：

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>路书</title>

    <style type="text/css">

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

        #map_canvas{width:100%;height:500px;}

        #result {width:100%}

    </style>

    <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

</head>

<body>

    <div id="map_canvas"></div>

    <div id="result"></div>

    <button id="run">开始</button>

    <button id="stop">停止</button>

    <button id="pause">暂停</button>

    <button id="hide">隐藏信息窗口</button>

    <button id="show">展示信息窗口</button>

    <script>

    var map = new BMap.Map('map_canvas');

    map.enableScrollWheelZoom();

    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);

    var lushu;

    // 实例化一个驾车导航用来生成路线

    var drv = new BMap.DrivingRoute('北京', {

        onSearchComplete: function(res) {

            if (drv.getStatus() == BMAP_STATUS_SUCCESS) {

                //var arrPois = res.getPlan(0).getRoute(0).getPath();

              // 【自定义轨迹数组实现轨迹绘制】，可以实现【车联网】GPS轨迹数据回放

               var arrPois = [{lat:30.6,lng:104.0},{lat:30.632333,lng:104.5444}];

                map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));

                map.setViewport(arrPois);

                lushu = new BMapLib.LuShu(map,arrPois,{

                defaultContent:"",//"从天安门到百度大厦"

                autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整

                icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),

                speed: 4500,

                enableRotation:true,//是否设置marker随着道路的走向进行旋转

                landmarkPois: [

                   {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},

                   {lng:116.315391,lat:39.964429,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},

                   {lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}

                ]});

            }

        }

    });

     // 【驱动方法执行，只要在回调函数onSearchComplete中处理就不会干扰最后的轨迹生成】，此处初始化就行不需要做修改

    drv.search('天安门', '百度大厦');

    //绑定事件

    $("run").onclick = function(){

        lushu.start();

    }

    $("stop").onclick = function(){

        lushu.stop();

    }

    $("pause").onclick = function(){

        lushu.pause();

    }

    $("hide").onclick = function(){

        lushu.hideInfoWindow();

    }

    $("show").onclick = function(){

        lushu.showInfoWindow();

    }

    function $(element){

        return document.getElementById(element);

    }

</script>

</body>

</html>

例子中只设置了两个点，效果如图：

注：示例代码中有些地方还可以再删减，有兴趣自己弄吧！

GPS功能：百度路书自定义【轨迹回放】的更多相关文章

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

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

  2. GPS/轨迹追踪、轨迹回放、围栏控制

    折腾一个多月终于弄完了这个项目,起初都未曾接触GPS/轨迹追踪.轨迹回放.圈划围栏...等一些在百度地图或者Googel地图操作的一些业务,后端的业务相对来说简单点 cas单点登录,mongdb灵活的 ...

  3. JS 百度地图路书---动态路线

    JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...

  4. 如何实现LBS轨迹回放功能？含多平台实现代码

    本篇文章告诉您,如何实现轨迹回放.并且提供了web端,iOS端,Android端3个平台的轨迹回放代码.拷贝后可以直接使用.另外,文末有小彩蛋,算是开发者的福利. Web端/JavaScript 实现 ...

  5. 如何使用JS来开发室内三维地图的轨迹回放功能

     在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...

  6. 使用GMap.NET类库，实现地图轨迹回放。(WPF版)

    前言 实现轨迹回放,GMap.NET有对应的类GMapRoute.这个类函数很少,功能有限,只能实现简单的轨迹回放.要实现更复杂的轨迹回放,就需要自己动手了. 本文介绍一种方法,可以实现复杂的轨迹回放 ...

  7. [敏杰开发]知识路书——图形化文献管理大师 Beta版发布喽！！！

    [敏杰开发]知识路书--图形化文献管理大师 Beta版发布喽!!! 一.总览 项目名称:知识路书 发布形式:网页应用 发布地址:http://roadmap.imcoming.top 二.运行环境与使 ...

  8. 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)

    物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)   2015年11月14日|    by: nbboy|    Category: 系统设计, 缓存设计, 高性能系统 摘要 ...

  9. SVG轨迹回放实践

    最近做了埋点方案XTracker的轨迹回放功能,大致效果就是,在指定几个顺序的点之间形成轨迹,来模拟用户在页面上的先后行为(比如一个用户先点了啥,后点了啥).效果图如下: 在这篇文章中,我们来聊聊轨迹 ...

随机推荐

  1. QML的渲染方式相较于之前的版本也有了重大的更新（CPU线程负责绘制，GPU线程负责渲染），还有好多经常评论 good

    作者:qyvlik链接:http://www.zhihu.com/question/38867614/answer/78583440来源:知乎著作权归作者所有,转载请联系作者获得授权. 做UI啊.如果 ...

  2. http cookie

    一.cookie的大小 cookie只能存储最大4kb的数据.cookie的名/值中的值不允许包含分号.逗号和空白符.因此可以采用encodeURIComponent()编码,读取的时候先采用deco ...

  3. 转：C#中的委托和事件(续)

    引言 如果你看过了 C#中的委托和事件 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为细节的问题,包括一些大家常 ...

  4. loadlibrary(xxx.dll) 失败 返回14001 由于应用程序配置不正确 应用程序未能启动.重新安装应用程序可能会纠正这个问 .

    欢迎大家拍砖! 一.应用背景 有一个在win7中用VS2008编译成功,运行正常的程序:Exe+DLL; 放到XP虚拟镜像上运行却提示:LoadLibrary返回14001. (1) 后来采用了下面方 ...

  5. linux进程间通信之管道篇

    本文是对http://www.cnblogs.com/andtt/articles/2136279.html管道一节的进一步阐释和解释 1 管道 1.1 管道简介 管道是unix系统IPC的最古老的形 ...

  6. Charles的使用教程

    Charles是mac os和windows下的另外一个抓包软件(均收费,可破解),功能与fiddler类似,优点是可以自定义上下行网速.External Proxy.反向代理配置简单.可解析AMF协 ...

  7. 11i - 12 How To Set Email Style Preference For All Users At Once?

    (文档 ID 578574.1) In this Document   Goal   Solution   Workflow Information Center, Diagnostics, & ...

  8. Submission Details

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  9. python面向对象(上)

    创建类 Python 类使用 class 关键字来创建.简单的类的声明可以是关键字后紧跟类名: class ClassName(bases): 'class documentation string' ...

  10. Haproxy+PXC实现负载均衡

    软件负载均衡一般通过两种方式来实现:基于操作系统的软负载实现和基于第 三方应用的软负载实现.LVS就是基于Linux操作系统实现的一种软负载,HAProxy就是开源的并且基于第三应用实现的软负载.HA ...