1.代码部分

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>

        <script src="http://api.map.baidu.com/api?v=2.0&ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"></script>

        <script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

        <script src="../../js/mui.min.js"></script>

        <script src="../../js/GeoUtils.js"></script>

        <link href="../../css/mui.min.css"  rel="stylesheet"/>

        <link href="../../css/iconfont.css" rel="stylesheet"/>

        <title>地图应用-移动轨迹</title>

        <style type="text/css">

            body,

            html,

            #allmap {

                width: 100%;

                height: 100%;

                overflow: hidden;

                margin: 0;

                font-family: "微软雅黑";

            }

        </style>

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

            <h1 class="mui-title mui-body-font">移动轨迹</h1>

        </header>

        <div id="allmap">

            地图加载中。。。

        </div>

    </body>

    <script type="text/javascript">

        // 百度地图API功能

        var map = new BMap.Map("allmap");

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

        var myP1 = new BMap.Point(116.380967,39.913285);    //起点

        var myP2 = new BMap.Point(116.424374,39.914668);    //终点

        var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), {    //小车图片

            //offset: new BMap.Size(0, -5),    //相当于CSS精灵

            imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。

          });

        var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例

        driving2.search(myP1, myP2);    //显示一条公交线路

        window.run = function (){

            var driving = new BMap.DrivingRoute(map);    //驾车实例

            driving.search(myP1, myP2);

            driving.setSearchCompleteCallback(function(){

                var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组

                var paths = pts.length;    //获得有几个点

                var carMk = new BMap.Marker(pts[0],{icon:myIcon});

                map.addOverlay(carMk);

                i=0;

                function resetMkPoint(i){

                    carMk.setPosition(pts[i]);

                    if(i < paths){

                        setTimeout(function(){

                            i++;

                            resetMkPoint(i);

                        },100);

                    }

                }

                setTimeout(function(){

                    resetMkPoint(5);

                },100)

            });

        }

        setTimeout(function(){

            run();

        },1500);

    </script>

</html>

2.测试

　

APP-7-百度地图移动轨迹的更多相关文章

  1. Android 给app加入百度地图

    1.获取sha1值 (1)win+R进入cmd窗口 (2)输入以下代码 C:\SoftApplication\javajdk\jdk1.8.0_151\bin>keytool -list -v ...

  2. 调用百度、高德地图App，百度地图网页版，App定位

    https://www.jianshu.com/p/296a3995adc2 https://blog.csdn.net/qq_26598821/article/details/51087785 ht ...

  3. Android百度地图附加搜索和公交路线方案搜索

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com 综述: 今 ...

  4. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  5. Android使用百度地图API实现GPS步行轨迹

    百度地图Android SDK下载:http://developer.baidu.com/map/sdkandev-download.htm 下面是效果: 采样点取得太频繁所以看起来像是一个个点... ...

  6. 在iOS APP中使用H5显示百度地图时如何支持HTTPS？

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

  7. 百度地图API提示"230错误 APP Scode校验失败"

    笔者近2天在 Android Studio上玩了一下百度地图,碰到了常见的"230错误 APP Scode校验失败",下面我来介绍一下具体的解决办法. 1.在andriodstud ...

  8. 【百度地图API】如何利用PhoneGap制作地图APP

    原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...

  9. 【百度地图API】北京周边7日游——图标按路线轨迹行动

    原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

  10. 百度地图与融云的“冲突”（APP的.so手机架构目录，与Library的.so的手机架构目录冲突）

    在项目引进融云的IMkit时,总是报百度地图的错误,最开始以为是65535的错误,然后试着去改下百度地图,错误原因是在IMKit里面,它的.so库有这么几个目录 而我的app的libs里面的百度地图的 ...

随机推荐

  1. 服务注册发现consul之四： 分布式锁之四：基于Consul的KV存储和分布式信号量实现分布式锁

    一.基于key/value实现 我们在构建分布式系统的时候,经常需要控制对共享资源的互斥访问.这个时候我们就涉及到分布式锁(也称为全局锁)的实现,基于目前的各种工具,我们已经有了大量的实现方式,比如: ...

  2. 面试总结之Google

    准备Google面试的总结 - 知乎 https://zhuanlan.zhihu.com/p/40866467 [不周山之算法与数据结构]壹 总览 | 小土刀 https://wdxtub.com/ ...

  3. Linux下统计局域网流量

    1:统计10.86.0.0/16网段的内网流量情况 将下面脚本保存成文件traffic-lan.sh(运行后需要等待10秒抓包) tcpdump -nqt src net and dst net ! ...

  4. [UE4]GameInstance初始化

    GameInstance的生命周期跟游戏进程一样. 每一次进入游戏都会初始化一个GameInstance,直到退出游戏才会被销毁. 不会随着场景的变化而被销毁.

  5. mac一些设置

    Mac自带了的JDK6,安装在目录:/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/下. JDK8则需要自己到Oracle官网下载安装对应的版本. ...

  6. ThreadException

    在windows窗体程序中,使用 ThreadException 事件来处理 UI 线程异常,使用 UnhandledException 事件来处理非 UI 线程异常.ThreadException可 ...

  7. CS229 6.5 Neurons Networks Implements of Sparse Autoencoder

    sparse autoencoder的一个实例练习,这个例子所要实现的内容大概如下:从给定的很多张自然图片中截取出大小为8*8的小patches图片共10000张,现在需要用sparse autoen ...

  8. Linux RPS/RFS 实现原理浅析

    本文快速解析一下RPS/RFS的基本原理. RPS-Receive Packet Steering 下面这个就是RPS的原理:  其实就是一个软件对CPU负载重分发的机制.其使能的作用点在CPU开始处 ...

  9. Linux交换空间（swap space）

    每次安装Linux的时候,都会要求配置交换分区,那么这个分区是干嘛的呢?不设置这个分区有什么后果?如果一定要设置,设置多大比较合适?本篇将试图回答这些问题并尽量覆盖所有swap相关的知识. 下面的所有 ...

  10. MySQL死锁问题分析及解决方法实例详解(转)

      出处:http://www.jb51.net/article/51508.htm MySQL死锁问题是很多程序员在项目开发中常遇到的问题,现就MySQL死锁及解决方法详解如下: 1.MySQL常用 ...