지도 경계, 성능 문제를 기반으로 히트 맵 데이터의 동적로드

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); 
};