<!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. CSS基础-引入方法，选择器，继承

    一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...

  2. LeeCode-Majority Element

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  3. Scala 函数（五）

    函数是一组一起执行一个任务的语句. 您可以把代码划分到不同的函数中.如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的. Scala 有函数和方法, ...

  4. 安装vs2015的时候出现的各种 1402错误

    经搜索与尝试,确认为注册表权限问题,改过好几个子项,均提示不能修改设置子项的所有者什么的,后来一怒之下,直接把install节点下的compom项的权限的administratos权限删掉,删除的时候 ...

  5. UGUI Scrollbar控件

    如题就是Scrollbar控件,它简单可以看成 Scrollbar 和 Image组件组成 它基本上不单独使用多数是制作滚动视图.我们来看看他独特的属性,重复的属性就不在介绍了! 属性讲解: Hand ...

  6. android createbitmap函数内存溢出，求解怎样进行处理out of memory溢出问题

    android createbitmap函数内存溢出,求解怎样进行处理out of memory溢出问题 android createbitmap函数内存溢出,求解怎样进行处理out of memor ...

  7. Android Studio虚拟机配置虚拟键盘

    1. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pjMjExMzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkF ...

  8. Maven 工程下 Spring MVC 站点配置 (一)

    最近,查找一些具体资料时,虽然会有很多,但是系统的却很少,尤其是对maven 下 spring mvc 站点搭建的配置,总是说的很多但让新手一目了然的步骤却少之又少. 对此闲暇时整理了一下,做了一套较 ...

  9. 多媒体封装格式----mkv

    Matroska 开源多媒体容器标准.MKV属于其中的一部分.Matroska常见的有.MKV视频格式.MKA音频格式..MKS字幕格式..MK3D files (stereoscopic/3D vi ...

  10. 在Android Studio中进行单元测试和UI测试

    本篇教程翻译自Google I/O 2015中关于测试的codelab,掌握科学上网的同学请点击这里阅读:Unit and UI Testing in Android Studio.能力有限,如有翻译 ...