如题所述：百度的编辑界面很直观，修改后就可以运行，地址：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. 【剑指offer】面试题23：从上往下打印二叉树

    题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: bfs,队列. 注意,队列最后不要忘了pop(). 代码: /* struct TreeNode { int val; stru ...

  2. Linux系统下定时上传文件至FTP服务器脚本

    环境:Red Hat Enterprise Linux Server release 6.4 需求:需要将Oracle数据库的定时备份上传至FTP服务器 1.干货,用户名:oracle,数据库名称:X ...

  3. autoprefixer安装或者里sass的$mixin处理浏览器前缀

    Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...

  4. Android 四大组件之 Activity

    1 简介 Activity (活动) 即应用程序 显示的 界面.可以通过两种方式 设置显示的内容 1:纯代码方式 2:xml 布局方式 无论哪一种方式,都是通过 setContentView 来设置显 ...

  5. 转：Xshell显示找不到匹配的outgoing encryption算法怎么办

    原文出处:http://www.xshellcn.com/xsh_column/suanfa-bpp.html 由用户反应在使用xshell和xftp连接debian 7时出现找不到匹配的outgoi ...

  6. 3GP文件格式研究

    需要看的文档 http://www.3gpp.org/ftp/Specs/archive/26_series/ 3GPP TS 26.233 3GPP TS 26.243 3GPP TS 26.244 ...

  7. 分享一个自己写的基于JQuery的一个Web背景切换的Demo

    这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = functi ...

  8. 16进制字符串转换为byte数组

    /// <summary> /// 16进制字符转换为byte数组 /// </summary> /// <param name="hexString" ...

  9. windows笔记

    三星(SAMSUNG)905S3G-K07 安装Windows 7 过程分享 http://www.cnblogs.com/scue/p/4100743.html 打开方式没有excel http:/ ...

  10. Docker 生成Node.js web app(含端口映射)

    1.新建目录src,并进入src目录 [xiejdm@localhost Documents]$ mkdir src [xiejdm@localhost Documents]$ cd src/ 2.创 ...