Google地图在重新绘制MarkerClustererPlus后冻结

时间:2015-03-11 22:16:03

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

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

我还有一个MarkerClustererPlus(http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.2/)也可以。

但是,我想更改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();
    });
}

这是有效的 - 至少对于Cluster文本。但是现在我们遇到了真正的问题:它冻结了整个地图。 Raven.js捕到这个:未捕获的TypeError:undefined不是一个函数。但没有比这更清楚了。

有什么想法吗?

编辑:

更多代码。使用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在外面可见。

1 个答案:

答案 0 :(得分: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对象。