如题所述：百度的编辑界面很直观，修改后就可以运行，地址：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. 【原创整理，基于JavaScript的创建对象方式的集锦】

    以下4种方式,是我在项目中最常见的JavaScript的面向对象的方式的开发. 测试一般在微软的工具:http://www.typescriptlang.org/Playground 进行测试,或者使 ...

  2. 精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具

    在制作界面原型的时候,如果有现成的界面基础元素可以使用的话,设计师就可以非常快速的完成原型的制作,能够节省大量的时间和精力.在这篇文章, 我向大家分享45套非常有用的 UI 和 Wireframe 套 ...

  3. 配置VirtualBox Linux系统与Windows共享文件

    手动方式配置VirtualBox Linux系统与Windows共享文件 首先,要安装VirtualBox自带的扩展工具,这个ISO可以在虚拟主机安装目录下找到. 将这个文件Copy到你的Linux主 ...

  4. 小KING教你做android项目（一）

    写在项目开始之前: 最近关于android的视频教程,入门的书籍也已经有很多了,例如我的入门就是看了mars的视频教程.但是这么一圈学习下来,觉得真正快速提高的,不是在看视频,而是在实际工作中动手做项 ...

  5. IOS7 UITableView一行滑动删除后 被删除行的下一行的点击事件将被忽略解决办法

    - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSI ...

  6. WPFS数据绑定（要是后台类对象的属性值发生改变，通知在“client界面与之绑定的控件值”也发生改变须要实现INotitypropertyChanged接口）

    WPFS数据绑定(要是后台类对象的属性值发生改变,通知在"client界面与之绑定的控件值"也发生改变须要实现INotitypropertyChanged接口) MainWindo ...

  7. 对于IE6及以下版本的处

    判断IE6 CSS 通过判断浏览器类型而加载不同的css样式 所有的IE都起作用: <!--[if IE]> <link rel="stylesheet" typ ...

  8. 由闭包引起的对javascript代码可维护性的思考

    在最近的编程实践中由闭包的使用引起了我对javascript代码可维护性的思考.面向对象的其中一个特性封装性通过封装可以降低类与类之间或模块与模块之间耦合性从而使我们的设计更加高内聚低耦合,在大规模的 ...

  9. 【巧妙的模拟】【UVA 10881】 - Piotr's Ants/Piotr的蚂蚁

    </pre></center><center style="font-family: Simsun;font-size:14px;"><s ...

  10. mysql密码忘记如何处理

    1,修改/etc/my.cnf添加添加skip-grant参数,重启mysql. 2,登录mysql  mysql -uroot 3, 更新user中root的密码  use mysql;   upd ...