如题所述：百度的编辑界面很直观，修改后就可以运行，地址：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. 用JSON 和 Google 实现全文翻译

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  2. [置顶] 玩转Eclipse — 自动注释插件JAutodoc

    代码注释是一种良好的编程习惯.不管对于他人还是自己,注释都有助于代码的阅读和理解.手动添加注释,是一个非常费时和繁琐的工作,严重影响软件开发效率,这也是绝大多数程序员不愿添加注释的主要原因.JAuto ...

  3. %{TIMESTAMP_ISO8601} 匹配2016-08-29 17:40:01,191

    2016-08-29 17:40:01,191 INFO com.zjzc.common.utils.HttpUtil - 请求接口: https://www.zjcap.cn/pay/interfa ...

  4. 剑指offter-面试题7.用两个栈实现队列

    题目.用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail和deleteHead 分别完成在对尾插入节点和在队头删除节点. 该队列类模板如下: template <typ ...

  5. ubuntu桌面环境配置及切换

    修改ubuntu默认启动的桌面环境:Ubuntu是否启动图形化界面取决于default-display-manager的设置. vi /etc/X11/default-display-manager值 ...

  6. ueditor+asp.net异步提交，可以实现了，嘿嘿

    之前没用过Ueditor去异步提交,最近项目需要用到这个,就下了个来用,结果可能没仔细去看Ueditor的相关介绍文档,然后自己也郁闷了一下才把它弄出来,现在可以实现异步提交了,松口气,把代码贴出来, ...

  7. git push -u origin master 上传出错问题

    ============================================ 跟着廖学锋教程初学git发现个很奇怪的问题,后面原来发现是这样,有点逗.. ================= ...

  8. Graham算法—二维点集VC++实现

    一.凸包定义 通俗的说就是:一组平面上的点,求一个包含所有点的最小凸多边形,这个最小凸多边形就是凸包. 二.Graham算法思想 概要:Graham算法的主要思想就是,最终形成的凸包,即包围所有点的凸 ...

  9. asp.net遍历页面中所有TextBox，并赋值为String.Empty的方法

    本文介绍下,如何用.net遍历页面中的所有TextBox控件,并赋值为string.empty的方法,通过实例学习具体操作.有需要的朋友可以参考下.   一.遍历窗体控件 1,普通页面遍历TextBo ...

  10. HDU 5728 - PowMod

    HDU 5728 - PowMod 题意:    定义: k = ∑(i=1,m) φ(i∗n) mod 1000000007 给出: n,m,p ,且 n 无平方因子 求: ans= k^(k^(k ...