Question

我已经实现了一个简单的页面，该页面使用侦听器来确定谷歌地图边界因缩放或平移而发生了哪些变化。我正在为地图中可见区域汇总的加权热图动态加载json数据。除了我在每次调用监听器时没有正确清除热图中的先前数据这一事实之外，它正在工作。在第4次或第5次调用以获取新数据后，性能开始下降。我尝试将heatmap设置为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);
};

基于地图界限，性能问题的热图数据动态载荷

1 个答案: