0

これは私にバナナを運転しています...

私はヒートマップでグーグルマップAPIv3を使用しています。データポイントのプロットに成功しましたが、問題はありません。でも、無限にループするアニメーションが欲しいです。現在、次のコードがあります。（マップは表示されますが、データポイントはありません。）

var _data = [];
pointArray = new google.maps.MVCArray(_data);
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
});

heatmap.setData(_data);
heatmap.setMap( map );

play = function(){
    for( var j = 0; j < data_arr.length; j++ ){
        pointArray.clear();

        for( var i = 0; i < data_arr[j].length; i++ ){
            pointArray.push( new google.maps.LatLng(data_arr[j][i]['lat'], data_arr[j][i]['lon']) );
        }

        setInterval(function(){
            play();
        }, 3000);
    }
}

google.maps.event.addListenerOnce(map, "idle", function(){
    play();
});

どんな助けでも、大歓迎です！

4

1 に答える 1

2

問題は、現在実行中のスクリプトが一時停止するまでヒートマップデータが更新されないことです。その時点で、すべてのデータ変更が行われているため、アニメーション化するものはありません。

残念ながら、これは単純なアプローチが機能しないことを意味します。直接ループでデータを変更する代わりに、データをアニメーションステップに分割し、いくつかのデータポイントのみを変更してから、setTimeoutを使用してチェーンの次のステップを呼び出す必要があります。これにより一時停止が与えられ、ライブラリが指定した変更を実際に行うことができるようになります。

さらに、あなたの使用setIntervalは間違っています（私はあなたsetTimeoutがこの場合を意味すると信じています）。あなたはループで呼び出しsetIntervalており、決してそれをクリアしていません。ループが繰り返されるたびに新しいタイミングで実行されるため、関数を呼び出す間隔が数百回になるのにそれほど時間はかかりませんplay。setTimeoutもう一度実行するだけです。

于 2012-11-30T17:35:19.907 に答える