javascript - DocumentFragment 和 Google map

Question

我有一个使用 Google map 实用程序库组合的网站； markerWithLabel 和markerClusterPlus。

markerWithLabel 操作 DOM 将标签放在 map 上。我遇到的问题是，这在时间和 CPU 方面都非常昂贵。

我想知道是否有一种方法可以缓存对 DOM 的写入并一次性刷新它们，以减少重绘并有望提高性能。

我在下面添加了这段代码来展示我目前的工作方式。新标记似乎是为添加到 map 中的每个项目重新绘制的部分。一次一个可能是最糟糕的方法。

$.rMap.ready( function() {
    per.mapRM = JSONH.unpack(per.mapRM);
    var markers = [];
    for (var i = 0, mlen = per.mapRM.length; i < mlen; ++i) {
        bubble_color = colorArray[parseInt(per.mapRM[i].b, 10)];
        var marker = new MarkerWithLabel({
            position: new google.maps.LatLng(parseFloat(per.mapRM[i].lt),parseFloat(per.mapRM[i].ln)),
            map: $.rMap.map,
            draggable: false,
            raiseOnDrag: false,
            icon: {},
            labelContent: '<div id="rental-marker-'+ per.mapRM[i].id+'" class="marker-for-rent">'+
            '<span class="point_border"></span><span class="point point_'+ bubble_color +
            '"></span><span class="bubble bubble_'+ bubble_color +
            '">$'+ per.mapRM[i].r+'</span>'
        });
        markers.push(marker);
    }

    var markerClusterer = new MarkerClusterer($.rMap.map, markers, {
        averageCenter: true,
        ignoreHidden: true,
        printable: true,
        maxZoom: 14
    });         
 });

例如，我正在考虑使用 documentFragments，还是我在这里找错了树？

谢谢

Answer 1

您是否尝试在创建 MarkerWithLabel 对象时删除参数“map: $.rMap.map”？

我认为markerClusterer应该处理这个问题，看起来你是在要求 map 渲染所有这些(在markerClusterer完成他的简化工作之前)