<?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. hdoj--2522--A simple problem(数学模拟)

    A simple problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. oracle 11gR2 如何修改 private ip

    1.1    修改 private ip1.1.1  确保crs集群是打开的可以用olsnodes –s 检查集群的状态./olsnodes -sP570a ActiveP570b Active1.1 ...

  3. EF Code First 使用 代码优先迁移（三）

    迁移到特定版本(包括降级) 到目前为止,我们一直升级到最新的迁移,但有时您可能需要升级/降级到特定的迁移. 这是目前我数据库中的表:有四个表,我降级到addEndTime这个版本(这个版本是没有gra ...

  4. windows上上传代码到Github

    Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限(公开共享,私有或指定合作者) Initialize this ...

  5. 小白向：web中利用request.getPart()上传文件到服务器

    被文件上传弄得焦头烂额的一天,果然web中的路径和各种设置真的好讨厌= = 下面是超级小白的.及其简约的“详”解 1.明确目的: 用户将 1.txt 文件 上传到 服务器(web工程下的某个文件夹)中 ...

  6. Core Java(七)

    面向对象特性整理 知识点:一. static修饰符 static修饰符可以用来修饰类的成员变量.成员方法和代码块.            . 用static修饰的成员变量表示静态变量,可以直接通过类名 ...

  7. onTouchEvent事件

    @Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTIO ...

  8. CorelDRAW X6冰点价加推800套燃爆6月

    CorelDRAW是迄今最具创意的图形设计程序,并获得所有行业的公认的知名工具.在刚刚结束的CorelDRAW X6限量活动之后,CorelDRAW官方继续加推800套CorelDRAW X6满足用户 ...

  9. MySQL-数据库安装及基本SQL语句

    一数据库基本概念 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件都运行在 ...

  10. [Atcoder Code Festival 2017 Qual A Problem D]Four Coloring

    题目大意:给一个\(n\times m\)的棋盘染四种颜色,要求曼哈顿距离为\\(d\\)的两个点颜色不同.解题思路:把棋盘旋转45°,则\((x,y)<-(x+y,x-y)\).这样就变成了以 ...