<!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. scheme一页纸教程

    这是一个大学教授写的,非常好,原文:http://classes.soe.ucsc.edu/cmps112/Spring03/languages/scheme/SchemeTutorialA.html ...

  2. UESTC_王之迷宫 2015 UESTC Training for Search Algorithm & String<Problem A>

    A - 王之迷宫 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  ...

  3. 【CF 676B Pyramid of Glasses】模拟，递归

    题目链接:http://codeforces.com/problemset/problem/676/B 题意:一个n层的平面酒杯金字塔,如图,每个杯子的容量相同.现在往最顶部的一个杯子倒 t 杯酒,求 ...

  4. java开发中遇到的问题及解决方法（持续更新）

    摘自 http://blog.csdn.net/pony12/article/details/38456261 java开发中遇到的问题及解决方法(持续更新) 工作中,以C/C++开发为主,难免与其他 ...

  5. Restful风格的springMVC配搭ajax请求的小例子

    1. GET请求的例子 ajax代码: 请求参数拼接在url后面(参数在服务器可通过HttpServletRequest获取,也可以直接通过@RequestParam自动注入,参考DELETE例子的方 ...

  6. pom.xml详解(转)

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  7. java中a++与++a区别

    java中a++与++a区别 a++与++a的区别,如果单独使用没有任何区别,如果在运算中就有区别了,a++是先运算在赋值,而++a是先赋值在运算!! 先看a++的代码哦 class demo1 { ...

  8. windows 下使clion支持c++11操作记录

    最近用上了windows下的clion,发现默认安装的MINGW版本太低,导致所带的gcc版本竟然是3.5的,实在太老了,不支持c++11,于是手动修改了mingw的版本.首先去mingw的官网下载最 ...

  9. 64bit ubuntu14.04编译PlatinumKit出现的arm-linux-androideabi-g++: not found错误解决方法

    编译命令:scons target=arm-android-linux build_config=Release 出现错误: scons: Reading SConscript files ...** ...

  10. node.js实践第二天

    使用Express框架搭建一个网站 1.安装Express 首先要用全局模式安装Express,因为只有这样才能在命令行中使用它.使用下述命令在伪dos命令窗口安装express. $ npm ins ...