1. <?php
  2.  
  3. echo <<<_END
  4. <!doctype html>
  5. <html>
  6. <head>
  7.     <meta charset="utf-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  10.     <title>点标记</title>
  11.     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  12.     <style>
  13.         .marker {
  14.             color: #ff6600;
  15.             padding: 4px 10px;
  16.             border: 1px solid #fff;
  17.             white-space: nowrap;
  18.             font-size: 12px;
  19.             font-family: "";
  20.             background-color: #0066ff;
  21.         }
  22.     </style>
  23.     <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
  24.     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
  25. </head>
  26. <body>
  27. <div id="container"></div>
  28. <script>
  29.     var marker, map = new AMap.Map("container", {
  30.         resizeEnable: true,
  31.         center: [126.60580555556, 45.702363888889],
  32.         zoom: 13
  33.     });
  34.     var getJSON = function(url) {
  35.       return new Promise(function(resolve, reject) {
  36.         var xhr = new XMLHttpRequest();
  37.         xhr.open('get', url, true);
  38.         xhr.responseType = 'json';
  39.         xhr.onload = function() {
  40.           var status = xhr.status;
  41.           if (status == 200) {
  42.             resolve(xhr.response);
  43.           } else {
  44.             reject(status);
  45.           }
  46.         };
  47.         xhr.send();
  48.       });
  49.     };
  50.  
  51.     getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) {
  52.         //alert('Your Json result is:  ' + jdata); //you can comment this, i used it to debug
  53.         //alert(jdata.data[0].gpsx);
  54.         //alert(jdata.data[0].gpsy);
  55.         window.i=0;
  56.         //addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy);
  57.         setInterval("addMarker()","1000");
  58.  
  59.     }, function(status) { //error detection....
  60.       alert('Something went wrong.');
  61.     });
  62.  
  63.     // 实例化点标记
  64.  function addMarker() {
  65.      window.i+=0.01;
  66.         marker = new AMap.Marker({
  67.             icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
  68.             position: [126.60580555556+window.i, 45.702363888889+window.i]
  69.         });
  70.         marker.setMap(map);
  71.     }
  72.  
  73. </script>
  74. </body>
  75. </html>
  76.  
  77. </script>
  78. </body>
  79. </html>
  80.  
  81. _END;
  82.  
  83. ?>

通过setInterval函数在地图上每隔1s打一次点的更多相关文章

  1. 寻路优化（一）——二维地图上A*启发函数的设计探索

    工作中需要优化A*算法,研究了一天,最后取得了不错的效果.看网上的朋友还没有相关的研究,特此记录一下.有错误欢迎大家批评指正.如需转载请注明出处,http://www.cnblogs.com/Leon ...

  2. 定时器相关 setTimeout setInterval 函数节流

    这个问题也是在参加百度的前端技术学院中遇到的 任务中需要用js实现动画  导师给的评价中setInterval会导致bug 当时不理解   下面把自己学习的过程分享出来 再次理解单线程   老是说js ...

  3. 浅谈setTimeout函数和setInterval函数

    前几天学了js,看到了两个非常有趣的函数,他们分别是setTimeout函数和setInterval函数,这两个函数能使网页呈现非常一些网页中比较常见的效果,比如说图片轮播,等一些非常好玩的效果.下面 ...

  4. 获取json数据后在 地图上打点，根据 json不断移动点的位置

    <?php echo <<<_END <!doctype html> <html> <head> <meta charset=&quo ...

  5. 什么是setTimeout函数和setInterval函数?

    我们一般在浏览网页的时候,一般都会有图片轮播等,一些比较好玩的特效,接下来我就给大家讲讲这俩个函数! 一setTimeout函数和setInterval函数的语法以及应用 1.setTimeout函数 ...

  6. 如何在iOS地图上高效的显示大量数据

    2016-01-13 / 23:02:13 刚才在微信上看到这篇由cocoachina翻译小组成员翻译的文章,觉得还是挺值得参考的,因此转载至此,原文请移步:http://robots.thought ...

  7. 插件～使用ECharts动态在地图上标识点~动态添加和删除标识点

    之前写过一个Echarts的文章,没有基础的同学可以先看这<上一篇>,对于一个地图和说,我们在初始化之后,你可能被在地图上标识出一些点,当然这根据你的业务去标识,而如果每次更新数据都加载全 ...

  8. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  9. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

随机推荐

  1. 我的Android进阶之旅------&gt;android Button上面的英文字符串自己主动大写的问题解决

    今天碰到一个关于Button的问题:android Button上面的英文字符串会自己主动变成大写,执行的Android 5.1版本号,例如以下图所看到的: 图1:Button 图2:TextView ...

  2. JAVA设计模式之【原型模式】

    1.案例一 学生复制 package Prototype; /** * Created by Jim on 2016/10/1. */ public class Student implements ...

  3. Java基础之关键字

    一.Java关键字总览 基本数据类型(9):boolean.char.byte.short.int.long.float.double.null 变量引用(2):super.this 类.方法.变量修 ...

  4. Rsync 服务器搭建

    Rsync简介 rsync 是一个 Unix 系统下的文件同步和传输工具. 它具备以下特性: 1. 能更新整个目录和树和文件系统 2. 有选择性的保持符号链链.硬链接.文件属于.权限.设备以及时间 等 ...

  5. 关于requestAnimationFrame()和cancelAnimationFrame()与定时器之间的比较

    在渲染页面动画的时候,其实也没有必要用定时器(setInterval),其实requestAnimationFrame()和cancelAnimationFrame()也能达到相应的效果,他是HTML ...

  6. 用replaceState操作路由的方法封装

    export class Router { ReplaceState(url, data) { var query = this.Generate(data); window.history.repl ...

  7. Type system

    Type system[edit] Main articles: Data type, Type system, and Type safety A type system defines how a ...

  8. Java语言特点与学习

    Java语言是一款面向对象的一款高级语言是由Sun Microsystems公司(现已被oracle公司收购).由James Gosling和同事们共同研发,并在1995年正式推出,据oracle官方 ...

  9. post数据html数据获取危险处理办法

      基础小知识 ValidateRequest属性是Page类中比较常用的属性,用来指示是否对输入数据进行潜在危险性检查.在默认情况下为True,就是表示 “是对输入的数据进行潜在危险性检查”,这个属 ...

  10. 转：用java调用oracle存储过程总结（比较好理解）

    这段时间开始学习写存储过程,主要原因还是因为工作需要吧,本来以为很简单的,但几经挫折,豪气消磨殆尽,但总算搞通了,为了避免后来者少走弯路,特记述与此,同时亦对自己进行鼓励. 一:无返回值的存储过程 存 ...