Question

我希望在云的叠加图像中实现循环的特征，借助雷达改变其相对于时间的位置。如何实现这一点。我正在使用谷歌地图v3。

Answer 1

以下是叠加的示例，及时移动。举个例子，我让吃豆人在比利时追逐鬼魂。

编辑：我添加了一个开始和停止按钮

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Moving overlays</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #directions-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }
      #map-canvas {
        margin-right: 400px;
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      var data = [
        {time: '20:00:00', pacman:{lat: 48.8, lng: 4.3}, ghost:{lat: 50.0, lng: 4.0}},
        {time: '20:30:00', pacman:{lat: 49.4, lng: 4.4}, ghost:{lat: 50.2, lng: 4.2}},
        {time: '21:00:00', pacman:{lat: 50.0, lng: 4.5}, ghost:{lat: 50.4, lng: 4.4}},
        {time: '21:30:00', pacman:{lat: 50.6, lng: 4.6}, ghost:{lat: 50.6, lng: 4.6}}
      ];
      var dataCounter = 0;
      var dataInterval = 1000;  // every new frame every 1000ms.  Feel free to change this
      var pacman = null;
      var ghost = null;
      var map;
      var timer;

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          zoom: 7,
          center: new google.maps.LatLng(50.5, 4.5)  // Belgium
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions
        );
      }

      function ghostIcon() {
        return {
          size: new google.maps.Size(20, 20),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(10, 10),
          url: 'http://1.bp.blogspot.com/_ZEF1cuisJEs/SGsuTtZd5cI/AAAAAAAAANY/iAqmMPQaX7g/s400/red.png'
        };
      }
      function pacmanIcon() {
        return {
          size: new google.maps.Size(20, 20),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(10, 10),
          url: 'http://www.scientix.eu/scientix-2-theme/images/emoticons/pac_man.gif'
        };
      }

      // this function will be called every 1000ms (or what ever dataInterval is).
      function timelapse() {
        var item = data[dataCounter % data.length];  // easiest way to make a loop.  After the last item, item 0 starts again

        if (! ghost) {// if the marker doesn't exist yet, first create it.
          ghost = new google.maps.Marker({
            position: new google.maps.LatLng(item.ghost.lat, item.ghost.lng),
            icon: ghostIcon(),
            map: map
          });
        }
        else {
          ghost.setPosition(new google.maps.LatLng(item.ghost.lat, item.ghost.lng))
        }
        if (! pacman) {// if the marker doesn't exist yet, first create it.
          pacman = new google.maps.Marker({
            position: new google.maps.LatLng(item.pacman.lat, item.pacman.lng),
            icon: pacmanIcon(),
            map: map
          });
        }
        else {
          pacman.setPosition(new google.maps.LatLng(item.pacman.lat, item.pacman.lng))
        }
        dataCounter++;
        timer = setTimeout(timelapse, dataInterval);
      }

      function start_timelapse() {
        clearTimeout(timer);           // if you don't add this, the previous timer is still working, you'll get two parallel timeOuts
        timelapse();
      }

      function stop_timelapse() {
        clearTimeout(timer);           // prevents setTimeout(timelapse, dataInterval); from continuing
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <input type="button" id="start" value="Start" onclick="start_timelapse()">
    <input type="button" id="stop" value="Stop" onclick="stop_timelapse()">
    <div id="map-canvas"></div>
  </body>
</html>

覆盖谷歌地图v3的循环功能

1 个答案: