<!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. java中list、set和map 的区别

    List按对象进入的顺序保存对象,不做排序或编辑操作.Set对每个对象只接受一次,并使用自己内部的排序方法(通常,你只关心某个元素是否属于Set,而不关心它的顺序--否则应该使用List).Map同样 ...

  2. UVa 1394: And Then There Was One

    设置一个数组Winner记录经典约瑟夫问题中的剩余者即可递归解决该问题. 注: 约瑟夫问题:有编号为0~n-1的n个人,从0号开始报数1,2,3......报到k的杀死,然后从下一个人开始继续报数1, ...

  3. swift中通知的使用

    1.发通知.(以这条通知为例,通知名字:gameOverNotification.通知参数:title) NSNotificationCenter.defaultCenter().postNotifi ...

  4. webpack构建具备版本管理能力的项目

    webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...

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

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

  6. android 根据网络来获取外网ip地址及国家，地区的接口

    新浪的IP地址查询接口:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 新浪多地域测试方法:http://int.dpool. ...

  7. js获取昨天日期

    刚刚js做项目,遇到需要获取昨天日期的问题,网上找了下答案,感觉网上的答案都不太严谨,自己写了个,凑合能用吧,忘大神们抛砖指教. <script type="text/javascri ...

  8. 查询sybase DB中占用空间最多的前20张表

    按照数据行数查询 name, row_count(db_id(), id) from sysobjects order by row_count(db_id(),id) desc 按照分配的空间查询 ...

  9. G - 密码 kmp、贪心、manachar等等等等

    G - 密码 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:%lld & %llu Submit Status ...

  10. List小练习

    功能:创建链表节点,删除节点,顺序打印,不改变原结构的情况下分别用STL中的stack实现逆序打印和利用函数递归打印 代码如下: //链表问题struct ListNode {    int m_nV ...