基于地图边界动态加载热图数据，性能问题

Question

我实现了一个简单的页面，该页面使用侦听器来确定 google 地图边界何时因缩放或平移而更改。我正在为地图中可见区域汇总的加权热图动态加载 json 数据。除了每次调用侦听器时我没有正确清除热图中的先前数据之外，它都在工作。在第 4 次或第 5 次调用以获取新数据后，性能开始下降。我尝试将热图设置为空。还需要什么来保持性能？

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

基于地图边界动态加载热图数据，性能问题

Dynamic Load of Heatmap Data based on Map Bounds, Performance Issue

google-maps

heatmap