動畫熱圖用新的數據集

我已經創建了一個簡單的熱圖（使用谷歌地圖API V3），我想在其中添加基本的動畫的元素。動畫熱圖用新的數據集

我有一些數據點的集合，每個集合代表一段時間（比如30分鐘）。

我想要「重放」對應於一個數據集合的熱圖，然後是下一個集合，然後是下一個，等等。幾乎就像回放視頻幀。

我試着用MVCArray做這個，我用新的數據點清除和更新。事情是這樣的

data = new google.maps.MVCArray(datapoints);

然後在幾秒鐘後：

for (i=0;i<data.getLength();i++){ 
     data.removeAt(i); 
    }

這是不行的，因爲新的熱圖數據只會ontop的老熱圖在瀏覽器的加入，即使數據數組已成功清除。

這個問題，一個基本的解決方案說明如下： Remove HeatmapLayer from google maps

解決方法是使用清除熱圖：

heatmap.setMap(null)

然而，這並沒有爲我工作，因爲這將徹底清除熱圖，並將地圖留空一兩秒鐘。也就是說，動畫效果丟失了。

任何建議在那裏對我能做什麼？

來源

2013-09-29 plithner

您能否創建一個[jsFiddle]（http://www.jsfiddle.net/）？ –

當然！我簡化了一下，但它捕捉了我的問題。腳本的作用是首先創建一個熱圖，然後等待5秒鐘，然後創建另一個。 http://jsfiddle.net/NNwx7/ – plithner

嗯，我不知道是否有可能將一個熱圖真正地製作成另一個，但絕對有可能做一些類似this的事情。

這基本上是做你做同樣的事情，但以更快的速度。

可以實現類似的東西有一些基本的JavaScript。

例如：

<script type="text/javascript"> 
    // initialise variables 
    var speed=5; 
    x=0; 
    var interval = setInterval(function(){},10000000); 
    var heatmap; 

    // function to change map 
    function changeSpeed(change) { 
     speed = speed+change; 
     if (speed<=0) speed=1; 
     if (speed>=10) speed=10; 

     // speed --> delay 
     if (speed>5) { 
      delay=1000/(speed-5); 
     } else { 
      delay=1000*(6-speed); 
     } 

     document.getElementById('speed').firstChild.nodeValue=speed; 

     // restarting the function 
     clearInterval(interval) 
     interval=setInterval(function(){ 
        x++; 
        if (x>=heatmapFiles.length) x=0; 
        // document.getElementById('filename').firstChild.nodeValue=heatmapFiles[x]; 

        var re = /[0-9]{8}/; 
        var datestr = re.exec(heatmapFiles[x])[0]; 
        document.getElementById('date').firstChild.nodeValue=datestr.substring(6,8)+"."+datestr.substring(4,6)+"."+datestr.substring(0,4); 

        var req = new XMLHttpRequest(); 
        req.open("GET", "./"+heatmapFiles[x], true); 
        req.onreadystatechange = function heatmapLoaded() { 
         if (req.readyState == 4) { 
          eval("map="+req.responseText); 
          heatmap.setData(map); 
         } 
        } 
        req.send(null); 

        // redraw 
        document.getElementById('boxed').style.display = 'none'; 
        document.getElementById('boxed').style.display = 'inline-block'; 

     },delay); 

    } 
    // this is important for you 
    function initialize() { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
           center: new google.maps.LatLng(0,0), 
           zoom: 2, 
           mapTypeId: google.maps.MapTypeId.ROADMAP 
           }); 

     // creating a new heatmap 
     heatmap = new google.maps.visualization.HeatmapLayer({ radius: 50 }); 
     heatmap.setMap(map); 

     // calling the 'change map' function 
     changeSpeed(0); 
    } 

    </script>

它是如何工作的？

熱圖數據以JSON格式存儲在單獨的Javascript文件中。計時器用於加載下一個數據集。它將被解析並分配給Google Maps HeatMapLayer對象的「data」屬性。屬性更改後，熱圖將隨新數據集自動重新繪製。 source

或者

您可以創建不同的div S中的不同的熱圖，然後使用jQuery fadeIn「新的」熱圖和fadeOut「舊」熱圖在同一時間。這會創建一種「動畫」。

我希望這可以幫助你。祝你好運！

來源

2013-09-29 16:08:22

謝謝！這將工作！（我只是希望我能把它弄好...... :-) – plithner

動畫熱圖用新的數據集

回答

相關問題