<?php

echo <<<_END

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>点标记</title>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <style>

        .marker {

            color: #ff6600;

            padding: 4px 10px;

            border: 1px solid #fff;

            white-space: nowrap;

            font-size: 12px;

            font-family: "";

            background-color: #0066ff;

        }

    </style>

    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

</head>

<body>

<div id="container"></div>

<script>

    var marker, map = new AMap.Map("container", {

        resizeEnable: true,

        center: [126.60580555556, 45.702363888889],

        zoom: 13

    });

    var getJSON = function(url) {

      return new Promise(function(resolve, reject) {

        var xhr = new XMLHttpRequest();

        xhr.open('get', url, true);

        xhr.responseType = 'json';

        xhr.onload = function() {

          var status = xhr.status;

          if (status == 200) {

            resolve(xhr.response);

          } else {

            reject(status);

          }

        };

        xhr.send();

      });

    };

    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) {

        //alert('Your Json result is:  ' + jdata); //you can comment this, i used it to debug

        //alert(jdata.data[0].gpsx);

        //alert(jdata.data[0].gpsy);

        window.i=0;

        //addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy);

        setInterval("addMarker()","1000");

    }, function(status) { //error detection....

      alert('Something went wrong.');

    });

    // 实例化点标记

 function addMarker() {

     window.i+=0.01;

        marker = new AMap.Marker({

            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",

            position: [126.60580555556+window.i, 45.702363888889+window.i]

        });

        marker.setMap(map);

    }

</script>

</body>

</html>

</script>

</body>

</html>

_END;

?>

通过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. 在外星人电脑上安装windows10和ubuntu16.04双系统小记

    最近刚刚入手了一台Alienware Aurora R6,买这货的主要目的是为了研究Deep Learning.之所以没有买组装机的原因,主要是担心组装机的不稳定,而实验经费中的设备费也还相对充足,于 ...

  2. Word技巧杂记（二）——批量修改修订格式并接受

    今天的题目好奇怪啊,呵呵,起因如下: 今天老婆在修改论文,她的老板提出一个非常**的要求——把Word中所有修订后的文字用特殊的字体(蓝色)标出来,然后再接受修订.我勒个去,明明有修订后的模式啊,为什 ...

  3. Android 利用TimerTask实现ImageView图片播放效果

    在项目开发中,往往 要用到图片播放的效果.今天就用TimerTask和ImageView是实现简单的图片播放效果. 当中,TimerTask和Timer结合一起使用.主要是利用TimerTask的迭代 ...

  4. chrome设置书签默认显示

    实用的设置! 这样已设置,就可以方便的查看一些常用的书签了!

  5. IPv6系列-入门指南

    本文是<IPv6系列>文章的第一篇<入门指南>,用于快速了解并上手IPv6. 小慢哥的原创文章,欢迎转载 目录 ▪ 一. 为什么要了解IPv6 ▪ 二. 顾虑:IPv6地址太复 ...

  6. vue-cli安装步骤

    vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 条件:  node在4.以上,npm在3以上 安装 指令: 1.npm install -g vue-cli 在全 ...

  7. Js基础知识（作用域、特殊函数---自调、回调、作为值的函数）

    15.作用域 概念: 规定变量或函数的可被访问的范围和生命周期 分类: 全局作用域 -就是指当前整个页面环境: 局部作用域(函数作用域) -就是指某个函数内部环境 l 变量的作用域 全局变量 - 定义 ...

  8. hdu 2795 Billboard 【线段树】

    给出一个高为h,宽为w的广告板,有n张广告需要贴,从第一行开始贴,尽量靠左,输出每个广告最后贴在哪一行的 先一直想不通这样建树是为什么 后来看到一篇题解里面的一句话“直到找到一个满足条件的叶子节点” ...

  9. Qwiklab'实验-Hadoop, IoT, IAM, Key Management'

    title: AWS之Qwiklab subtitle: 1. Qwiklab'实验-Hadoop, IoT, IAM, Key Management Service' date: 2018-09-1 ...

  10. SpringMVC框架入门

    简介 SpringMVC采用模型(Model)-视图(View)-控制器(controller)的方法把业务逻辑.数据与界面显示分离.用通俗的话来讲,MVC的理念就是把数据处理.数据展示和程序/用户的 ...