Google マップ ユーティリティ ライブラリを組み合わせて使用するサイトがあります。マーカーウィズラベルとマーカークラスタープラス。
markerWithLabel は、DOM を操作して地図にラベルを配置します。私が抱えている問題は、これが時間的にも CPU 的にも非常にコストがかかることです。
再描画を減らし、できればパフォーマンスを向上させるために、書き込みを DOM にキャッシュして一度にフラッシュする方法があるかどうかを知りたいです。
現時点での作業方法を示すために、このコードを以下に追加しました。新しいマーカーは、マップにアイテムを追加するたびに再描画されるように見える部分です。おそらく、一度に 1 つずつ行うには最悪の方法です。
$.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 を使用することを考えていましたか、それともここで間違ったツリーを吠えていますか?
ありがとう