覆蓋谷歌地圖v3的循環功能

我想在雷達的幫助下，在時間上改變其位置來實現雲層覆蓋圖像中的循環特徵。這是如何實施的。我正在使用谷歌地圖v3。覆蓋谷歌地圖v3的循環功能

2014-10-20 devanshul

做那些雲的形狀改變而動？你從哪裏得到那些雲的數據？可以製作覆蓋圖（及時）;沒問題。 – 2014-10-20 12:41:51

以下是覆蓋圖的一個例子，及時移動。作爲一個例子，我讓吃豆人在比利時追逐幽靈。

編輯：我添加了一個啓動和停止按鈕

<!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>

來源

2014-10-20 13:33:50

如果我們想玩和停止功能，那麼它是如何實現的。就像停止按鈕單擊然後循環停止，反之亦然。在開始的情況下數據數組不固定，它應該是動態的。可能嗎？ – devanshul 2014-10-21 05:24:58

我添加了一個開始和停止按鈕。當然，您可以隨時隨地更改數據。這不是我可以在評論中回答的東西。你的動態數據來自哪裏？ – 2014-10-21 08:39:34

這裏動態數據的含義是，我打電話給ajax根據時間爲不同的城市提取雲的位置，我想在疊加層上顯示這個位置。如果開始按鈕點擊該動畫，反之亦然。 – devanshul 2014-10-21 09:08:12

覆蓋谷歌地圖v3的循環功能

回答

相關問題