如何在MarkerClusterer图标中对齐数字？

Question

我使用谷歌地图api v3，我想显示数字对齐的自定义群集引脚，如下所示：

我试过这段代码：

var clusterOptions = {
        zoomOnClick: false,
        styles: [{height: 36, width: 36, url: location.href.substring(0, location.href.lastIndexOf("/")+1)+'images/pushpin_cluster.png' }]}
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);

但它显示如下：

如何将群集图标编号对齐到蓝色框中。

提前致谢...

Answer 1

我试过这段代码运行良好：

var clusterOptions = {
        zoomOnClick: false,        
        styles: [{ anchor:[2,22],textColor: "white",height: 36, width: 36, url: location.href.substring(0, location.href.lastIndexOf("/")+1)+'images/pushpin_cluster.png' }]}
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);

anchor：[2,22] - 从群集图标的中心到文本标签居中和绘制的位置（以像素为单位）。格式为[yoffset，xoffset]，其中yoffset从中心向下移动时增加，xoffset增加到中心右侧。默认值为[0,0]。

Answer 2

如果你正在使用markerclustererplus library，那么你可以覆盖该库代码。

/**
 * Adding the cluster icon to the dom.
 * @ignore
 */

ClusterIcon.prototype.onAdd = function() {
  this.div_ = document.createElement('DIV');
  if (this.visible_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);

    var innerHtml;

    if (this.cluster_.markers_.length > 0) {
        innerHtml = "<div><p id='clusterIconText'>" + this.sums_.text + "</p></div>";
    }

    this.div_.innerHTML = innerHtml;
  }

  var panes = this.getPanes();
  panes.overlayMouseTarget.appendChild(this.div_);

  var that = this;
  google.maps.event.addDomListener(this.div_, 'click', function() {
    that.triggerClusterClick();
  });
};

通过css你可以根据这样的要求改变风格

 #clusterIconText
        {
            margin-top:-70px;
            margin-left:-70px; 
            color:#f2f2f2;
        }

Answer 3

添加这个答案是因为虽然chimbu的回答让我失望，但并没有完全解释这个问题。样式数组中的每个对象都与您可以提供的五个集群图标之一相关联，并且似乎提供样式对象将覆盖您的imagePath属性（因为，在我的情况下，只提供一个没有url的样式对象，期望imagePath仍然工作，打破了一切）。这是我现在使用的代码：

new MarkerClusterer(map, [], {
    maxZoom: 16,
    ignoreHidden: true,
    styles: [
      ..._.map([1, 2, 3, 4, 5], () => ({
        textColor: 'black',
        url: './img/cluster/m1.png',
        height: 52,
        width: 53,
        anchorText: [2, 2]
      }))
    ]
  });

如果你有5个不同的图像，你可以点击回调的第一个参数并调整数字（1,2等等）来做一些数学运算来使高度，宽度和锚点文字更大/更小。当然，如果您愿意，您也可以仅为要应用于每个群集图标的样式数组提供一个对象，但是如果您需要，此示例提供了一些灵活和自定义。