<!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. 场景2 nginx 错误日志格式:

    nginx 错误日志格式: 2016/09/01 11:23:36 [error] 28388#0: *14549 open() "/var/www/zjzc-web-frontEnd/im ...

  2. ZOJ3578(Matrix)

    Matrix Time Limit: 10 Seconds      Memory Limit: 131072 KB A N*M coordinate plane ((0, 0)~(n, m)). I ...

  3. MySQL中explain的type类型

    |  ALL              |  全表扫描 |  index            |  索引全扫描 |  range            |  索引范围扫描,常用语<,<= ...

  4. [裸KMP][HDU1711][Number Sequence]

    题意 找到子串在母串出现的第一个位置 解法 裸的KMP 特别的地方 第一次不看模板自己敲的KMP #include<stdio.h> const int maxn=100000; cons ...

  5. yum 安装软件提示错误

    试用yum命令装软件时,遇到了下面的问题,错误提示: rpmdb: unable to join the environment error: db4 error(11) from dbenv-> ...

  6. 那些 Cynthia 教我的事 之 PMSec (二)

    一.在Foreach之前要判断是否为空. 常常从数据库里取出来表就直接用了,很少记得判断是否有值.不严谨的说. 专业人员写的是酱滴... DataLayer.PMSecDataSet.PMSECReq ...

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

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

  8. Activity之间通过intent 传递Map

    //传递 Map<String,Object> data=orderlist.get(arg2-1); SerializableMap tmpmap=new SerializableMap ...

  9. 初探JS-html5移动端发送指定内容短信到指定号码

    原理:利用a标签跳转指定网址: sms://[号码]?body=[内容] //安卓 sms://[号码]&body=[内容] //IOS 首先简单的做两个input,一个用于输入内容,一个用于 ...

  10. Android studio教程：[4]真机测试

    有了Android studio这么好用的软件,自然要有一部不错的安卓手机,然后在真机上测试自己的程序,那样才能更好的发现程序中存在的问题,毕竟模拟器不是真正的手机嘛. 工具/原料 Android s ...