zoukankan      html  css  js  c++  java
  • 通过setInterval函数在地图上每隔1s打一次点

    <?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;
     
    
    ?>
  • 相关阅读:
    爬虫案例
    伪静态
    HTTP0.9、HTTP1.0、HTTP1.1、HTTP2的区别
    正向代理和反向代理
    数据结构继承
    APP 爬虫
    算法基础
    matplotlib
    Java类加载机制及自定义加载器
    SpringBoot war包部署到Tomcat服务器
  • 原文地址:https://www.cnblogs.com/vactor/p/6681125.html
Copyright © 2011-2022 走看看