如题所述：百度的编辑界面很直观，修改后就可以运行，地址：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. HttpApplication实战大文件上传 (第四篇)

    一.Asp.net中的文件上传 在Asp.net 1.1中,文件在上传过程中将被全部保存在内存中,对于大文件来说,会造成内存空间的过度使用,可能会招致恶意攻击.为了解决这个问题,Asp.net在配置文 ...

  2. 几个js的linq实现

    几个js的linq实现 linqjs.codeplex.com jslinq.codeplex.com javascriptiqueryable.codeplex.com fromjs.codeple ...

  3. ubuntu 12.04（Precise Pangolin）启用休眠（Hibernate）功能的方案

    官方支持文档:https://help.ubuntu.com/12.04/ubuntu-help/power-hibernate.html 按照这篇官方支持,因为休眠功能存在bug,12.04没有默认 ...

  4. Number of Containers(数学） 分类： 数学 2015-07-07 23:42 1人阅读 评论(0) 收藏

    Number of Containers Time Limit: 1 Second Memory Limit: 32768 KB For two integers m and k, k is said ...

  5. Python load json file with UTF-8 BOM header - Stack Overflow

    Python load json file with UTF-8 BOM header - Stack Overflow 3 down vote Since json.load(stream) use ...

  6. tangible T4 Editor 2.2.3 plus modeling tools for VS 2012 扩展名

    tangible T4 Editor 2.2.3 plus modeling tools for VS 2012 扩展名 tangible T4 Editor 2.2.3 plus modeling ...

  7. CF 39E What Has Dirichlet Got to Do with That? （博弈）

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题意:给出a ^ b,两个人轮流操作,可以  a ...

  8. Eclipse/IDEA中使用Maven创建Web项目报错

    Eclipse中的错误:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webapp-1.0.jar:R ...

  9. Co-prime Array&&Seating On Bus（两道水题）

     Co-prime Array Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Su ...

  10. linux网络编程--跳水send和recv

    要了解一个概念:所有的TCP socket在内核具有发送缓冲器和接收缓冲器.TCP除了全双工操作模式TCP滑模取决于这两个单独buffer和这个buffer填充状态. 接收缓冲器数据缓存入内核.应用进 ...