<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta charset="utf-8" />

<title>Google地图轨迹回放测试</title>

<style type="text/css">

body, html,#mapContainer {width: 100%;height: 100%;overflow: hidden;margin:0;z-index: 1;}

</style>

<script src="http://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k&sensor=false&libraries=drawing,places"></script>

<script language="javascript">

var map;

function initialize() {

      var mapOptions = {

        center: new google.maps.LatLng(30.65721817, 104.06594494),

        zoom: 16,

        panControl: true,

        zoomControl: true,

        mapTypeControl: true,

        scaleControl: true,

        overviewMapControl: true,

        mapTypeId: google.maps.MapTypeId.ROADMAP

      };

      map = new google.maps.Map(document.getElementById('mapContainer'),mapOptions);

      //圆移动

      var lineCoordinates = [

            new google.maps.LatLng(30.65721817, 104.06594494),

            new google.maps.LatLng(30.656361,104.065477 ),

            new google.maps.LatLng(30.652691, 104.066058  ),

            new google.maps.LatLng( 30.652485,104.068823 ),

            new google.maps.LatLng(30.655939,104.071278 )

          ];

          var lineSymbol = {

            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

            //scale: 2,

            strokeColor: '#393'

          };

          line = new google.maps.Polyline({

            path: lineCoordinates,

            icons: [{

              icon: lineSymbol,

              offset: '0%'

            }],

            map: map

          });

          animateCircle();

}

//圆移动

function animateCircle() {

    var count = 0;

    var animate1=window.setInterval(function() {

      count = (count + 1) % 200;

      var icons = line.get('icons');

      icons[0].offset = (count / 2) + '%';

      line.set('icons', icons);

      //终点停车

      /*

      if((count / 2)>=99){

          clearInterval(animate1);

      }

      */

  }, 20);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script> 

</head> 

<body> 

  <div id="mapContainer"></div> 

</body> 

</html>

Google地图轨迹回放模拟的更多相关文章

  1. 使用GMap.NET类库，实现地图轨迹回放。(WPF版)

    前言 实现轨迹回放,GMap.NET有对应的类GMapRoute.这个类函数很少,功能有限,只能实现简单的轨迹回放.要实现更复杂的轨迹回放,就需要自己动手了. 本文介绍一种方法,可以实现复杂的轨迹回放 ...

  2. iOS 高德地图轨迹回放的 思路, 及方法

    // 开始,公司要求制作一段跑步轨迹 在地图上的 动画回放, 传入一段经纬度, 开始一想,这不是很简单吗, 高德地图有可以把经纬度转换成坐标点的方法 /** * @brief 将经纬度转换为指定vie ...

  3. 如何使用JS来开发室内三维地图的轨迹回放功能

     在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...

  4. 使用百度地图API实现轨迹回放

    调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...

  5. 如何实现LBS轨迹回放功能？含多平台实现代码

    本篇文章告诉您,如何实现轨迹回放.并且提供了web端,iOS端,Android端3个平台的轨迹回放代码.拷贝后可以直接使用.另外,文末有小彩蛋,算是开发者的福利. Web端/JavaScript 实现 ...

  6. GPS/轨迹追踪、轨迹回放、围栏控制

    折腾一个多月终于弄完了这个项目,起初都未曾接触GPS/轨迹追踪.轨迹回放.圈划围栏...等一些在百度地图或者Googel地图操作的一些业务,后端的业务相对来说简单点 cas单点登录,mongdb灵活的 ...

  7. SVG轨迹回放实践

    最近做了埋点方案XTracker的轨迹回放功能,大致效果就是,在指定几个顺序的点之间形成轨迹,来模拟用户在页面上的先后行为(比如一个用户先点了啥,后点了啥).效果图如下: 在这篇文章中,我们来聊聊轨迹 ...

  8. Google 地图 API for Android

    原文:Introduction to Google Maps API for Android 作者:Eunice Obugyei 译者:kmyhy 从健康类 app Runkeeper 到游戏 app ...

  9. Android Google 地图 API for Android

    从健康类 app Runkeeper 到游戏 app 精灵宝可梦,位置服务对现代 app 来说越来越重要. 在本文中,我们将创建一个 app,名字就叫做 City Guide.这个 app 允许用户搜 ...

随机推荐

  1. 线程池 异步I/O线程 <第三篇>

    在学习异步之前先来说说异步的好处,例如对于不需要CPU参数的输入输出操作,可以将实际的处理步骤分为以下三步: 启动处理: 实际的处理,此时不需要CPU参数: 任务完成后的处理: 以上步骤如果仅仅使用一 ...

  2. Redhat关闭SELinux和防火墙的办法（转）

    Redhat使用了SELinux来增强安全,关闭的办法为:1. 永久有效修改 /etc/selinux/config 文件中的 SELINUX="" 为 disabled ,然后重 ...

  3. mysql logstash 配置

    [elk@dr-mysql01 mysql]$ cat logstash_mysql.conf input { file { type => "zj_mysql" path ...

  4. 瑞柏匡丞:国内外App市场分析报告

    互联网不可阻挡的向移动互联网转化.对于各种新兴产业来讲,移动APP是当下行业的颠覆者,也是未来的王者.国内外app市场的火热程度都已经远远超出了人们的预想,然而国内外市场的区别还是相当明显的. 首先, ...

  5. 微型 Python Web 框架 Bottle - Heroin blog

    微型 Python Web 框架 Bottle - Heroin blog 微型 Python Web 框架 Bottle

  6. HBase 3、HBase练习题

    1.建立学生和课程表 要求:学生可以选择多个课程,每个课程可以被多个学生选择. 查询某个学生所选的所有课程列表 查询某个课程,的学生列表 学生可以修改所选的课程 方案:学生与课程之间是多对多关系,那可 ...

  7. 徐汉彬：亿级Web系统搭建—单机到分布式集群

    当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构层 ...

  8. IOS 掉用系统发短信

    #import <MessageUI/MessageUI.h> MFMessageComposeViewControllerDelegate #pragma mark - 调用ios系统短 ...

  9. 记录一个原因不明的段错误(libxml2 proc activemq的三角恋)

    又碰到了令人头疼的段错误,但是这次,虽然最终找到了出自何处,但是还是不明白究竟是为何. 最后将程序简化,贴上来,希望高人能指点一下. memt.pc: #include <libxml/pars ...

  10. The Building Blocks- Components of EA Part 2- Process, People, Network and Time

    1. Zachman Framework Information (Data) - Answer the Question 'What?' Contextual: List of Things imp ...