Question

我创建了一个简单的热图（使用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)

然而，这对我不起作用，因为这将完全清除热图，并使地图空了一两秒。也就是说，动画效果会丢失。

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

Answer 1

好吧，我不知道是否可以将一个热图动画到另一个热图中，但绝对可以做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中创建不同的热图，然后使用jQuery同时fadeIn'新'热图和fadeOut'旧'热图。这会产生一种“动画”。

我希望这会帮助你。祝你好运！

带有新数据集的动画热图

1 个答案: