重新绘制 MarkerClustererPlus 后谷歌地图冻结答案

【问题标题】：Google Map freezes after repainting MarkerClusterPlus重新绘制 MarkerClustererPlus 后谷歌地图冻结
【发布时间】：2015-03-13 20:53:25
【问题描述】：

我有一张地图，上面有一些 MarkerWithLabel 对象 (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/)。在这种情况下，标签是整数。

我还有一个 MarkerClusterPlus (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.2/)，它也可以正常工作。

但是，我想更改 Clusters 上的文本，以显示 Clusters 内每个 MarkerWithLabel 的标签上这些整数的总和。

我通过将此函数绑定到集群的末尾来做到这一点：

function calculateClusterLabels() {
    $.each(markerCluster.clusters_, function(i, cluster){
        var sum = 0;
        var cluster_markers = cluster.getMarkers();
        $.each(cluster_markers, function(j, marker) {
            sum += marker.labelContent;
        });
        cluster.clusterIcon_.sums_['text'] = sum;
        cluster.updateIcon(); // also tried cluster.repaint();
    });
}

这很有效 - 至少对于集群文本。但现在我们遇到了真正的问题：它冻结了整个地图。 Raven.js 捕捉到了这一点：Uncaught TypeError: undefined is not a function。但没有比这更清楚的了。

有什么想法吗？

编辑：

更多代码。使用 ajax 获取数据，然后在循环中设置标记：

$.each(us_data, function(k, v) {
    var markerPosition = new google.maps.LatLng(us_data[k]['lat'], us_data[k]['lon']);
    var marker = new MarkerWithLabel({
        position: markerPosition,
        draggable: false,
        map: map,
        labelContent: us_data[k]['count'],
        labelAnchor: anchor,
        labelClass: "marker-with-label"
    });

markers.push(marker);
});

然后我制作集群并绑定事件：

markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/m'});
google.maps.event.addListener(markerCluster, 'clusteringend', function() {
    calculateClusterLabels();
});

这一切都发生在 ajax 的 .done() 内部，但是 markerCluster 和 marker 在外部可见。

【问题讨论】：

我们需要更多代码来回答您的问题。查看每个集群中的getTotalMarkers 和getMarkers。
我添加了更多代码。我确实使用 getMarkers 方法
请查看这篇文章：toptal.com/javascript/10-most-common-javascript-mistakes。它是导致上述错误的常见 javascript 错误的综合指南。我有点相信#6 是你得到它的原因。希望对您有所帮助！
@KayAnn 谢谢，但这不是问题。我会用答案更新我的问题。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

回答我自己：嗯，毕竟很简单：

function calculateClusterLabels() {
    $.each(markerCluster.clusters_, function(i, cluster){
        var sum = 0;
        var cluster_markers = cluster.getMarkers();
        $.each(cluster_markers, function(j, marker) {
            sum += marker.labelContent;
        });
        if (cluster.clusterIcon_.sums_ != null) {
            cluster.clusterIcon_.sums_['text'] = sum;
        }
    });
}

我所做的 - 我添加了一个简单的 if 语句来检查 .sums_ 对象是否不为空（因为它仅在内部有标记的可见集群上不为空）并且我省略了 .updateIcon 调用并且一切正常完美，没有错误。

就我而言，一个更好的解决方案是简单地更改 markerclusterer.js 源文件：

MarkerClusterer.CALCULATOR = function (markers, numStyles) {
  var index = 0;
  var title = "";
  var count = 0;
  if (typeof markers[0].labelContent != 'undefined') {
      var sum = 0;
      var i;
      for (i = 0; i < markers.length; ++i) {
          if (!isNaN(markers[i].labelContent) {
              sum += markers[i].labelContent;
          } else {
              // whatever we need, perhaps we want to calculate it differently
          }
      }
      count = sum.toString();
  } else {
      count = markers.length.toString();
  }

  var dv = count;
  while (dv !== 0) {
    dv = parseInt(dv / 10, 10);
    index++;
  }

  index = Math.min(index, numStyles);
  return {
    text: count,
    index: index,
    title: title
  };
};

这更好，因为它还更新了 Cluster 样式，并且它适用于常规 Marker 和 MarkerWithLabel 对象。

【讨论】：