2

我创建了一个简单的热图（使用 google maps api v3），我想在其中添加一个基本动画元素。

我有许多数据点集合，每个集合代表一个时间段（比如 30 分钟）。

我想“重播”与一个数据集合相对应的热图，然后是下一个集合，然后是下一个，依此类推。几乎就像重播视频帧一样。

我试过用 MVCArray 来做这件事，我用新的数据点清除和更新。像这样的东西

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

然后几秒钟后：

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

这不起作用，因为新的热图数据将简单地添加到浏览器中的旧热图之上，即使数据数组已成功清除。

这个问题，这里描述了一个基本的解决方案： Remove HeatmapLayer from google maps

解决方案是使用以下方法清除热图：

heatmap.setMap(null)

但是，这对我不起作用，因为这将完全清除热图，并将地图留空一两秒钟。也就是失去了动画效果。

关于我能做什么的任何建议？

4

1 回答 1

0

好吧，我不知道是否可以真正将一个热图动画化到另一个中，但绝对可以做这样的事情。

这基本上与您做的事情相同，但速度更快。

您可以使用一些基本的 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 对象的“数据”属性。更改属性后，将使用新数据集自动重绘热图。资源

或者

您可以在不同的 s 中创建不同的热图div，然后将 jQuery 同时用于fadeIn“新”热图和fadeOut“旧”热图。这将创建一种“动画”。

我希望这能够帮到你。祝你好运！

于 2013-09-29T16:08:22.917 回答