<?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. Redis命令-HyperLogLog

    HyperLogLog数据结构简单介绍 能够看http://www.cnblogs.com/ysuzhaixuefei/p/4052110.html  博客,介绍的相对照较清晰. HyperLogLo ...

  2. SGU 531 - Bonnie and Clyde 预处理+二分

    Bonnie and Clyde Description Bonnie and Clyde are into robbing banks. This time their target is a to ...

  3. PHPStorm中使用bootstrap3控件！

    PHPStorm中使用bootstrap3控件! 奇怪为什么不自动提示呢? 原来需要Ctrl+j才显示出来! 很方便的控件!!!!

  4. mac下安装postgreSql

    在 mac 下,可以利用 homebrew 直接安装 PostgreSQL: 1 brew install postgresql -v 稍等片刻,PostgreSQL 就安装完成.接下来就是初始数据库 ...

  5. 前端面试---常见的web安全及防护原理

    一.常见的web安全及防护原理 1.sql注入原理 就是通过把sql命令插入到web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 防护,总的来说有以下几点: 1. ...

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

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

  7. Python3之时间模块详述

    Python3之时间模块  time & datetime & calendar 一. 概述 python 提供很多方式处理日期与时间,转换日期格式是一个常见的功能. 时间元组:很多p ...

  8. gvim74 提示报错 “无法加载库python27.dll”

    官方提供的gvim安装文件默认是支持python和python3两种模式的,编译时带有该选项,但并没有附带对应的运行库和运行环境.所以在本地没有安装python时直接在vim中执行 :py print ...

  9. 杭电 2817 A sequence of numbers【快速幂取模】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2817 解题思路:arithmetic or geometric sequences 是等差数列和等比数 ...

  10. C#基础篇之语言和框架介绍

    1.如何描述C#和.NET的关系? .Net的是平台,C#是为了微软公司为了.NET平台开发的面向对象语言. 2.C#能做什么? (1)C#.NET做窗体应用开发,Web开发中可以通过WCF编写Web ...