マップ境界、パフォーマンスの問題に基づいたヒートマップデータの動的ロード

Question

リスナーを使用して、ズームまたはパンのためにGoogleマップの境界がいつ変更されたかを判断する簡単なページを実装しました。私はマップに表示されている領域で要約された重み付けヒートマップのjsonデータを動的にロードしています。リスナーへのコールごとにヒートマップから以前のデータを適切にクリアしていないことを除いて、すべて機能しています。新しいデータをフェッチするための4回目または5回目の呼び出し後に、パフォーマンスが低下し始めます。ヒートマップをnullに設定しようとしました。パフォーマンスを維持するために何が必要ですか？

var map, heatmap; 
    var heatMapData = []; 

    function initMap() { 

     var uluru = { lat: 32.673363, lng: -97.399290 }; 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 14, 
      center: uluru 

     }); 

     google.maps.event.addListener(map, "bounds_changed", function() { 
      heatmap = null; 
      var bounds = map.getBounds(); 
      //TODO: implement async request 
      var Httpreq = new XMLHttpRequest(); // a new request 
      var boxRequest = 'HeatMapData?lmin=' + bounds.f.f + '&lmax=' + bounds.f.b + '&lnmin=' + bounds.b.b + '&lnmax=' + bounds.b.f; 
      Httpreq.open("GET", boxRequest, false); 
      Httpreq.setRequestHeader("Content-type", "application/json") 
      var heatMapJSON = Httpreq.responseText; 

      heatMapData = []; 
      var parsedJSON = JSON.parse(heatMapJSON); 
      for (var i = 0; i < parsedJSON.length; i++) { 
       heatMapData.push({ location: new google.maps.LatLng(parsedJSON[i].Lat, parsedJSON[i].Lon), weight: parsedJSON[i].weight }) 
      }; 
      console.info('map points: ' + parsedJSON.length.toString()); 

      heatmap = new google.maps.visualization.HeatmapLayer({ 
       data: heatMapData, 
       map : map 
      }); 

     }); 

Answer 1

if (heatmap != null) { 
    heatmap.setMap(null); 
};