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

Question

我正在使用Google地图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);

但是它显示的是这样的： 我应该如何将群集图标数字对齐到蓝色框中。

提前致谢...

- chimbu

---

你在那个蓝色的框里应用了什么CSS？那个数字在框里面还是外面？ - Richa

蓝色框是图片，而不是 CSS。编号不在蓝色框内。 - chimbu

好的。蓝色框是否与那个环合并？如果是的话，请分享相关的CSS代码。实际上，分享一下该编号的父级元素的CSS代码。 - Richa

问题已更新。我没有使用任何额外的CSS。 - chimbu

尝试使用“achor”值（标签文本的锚定位置）。请查看advanced_example.html示例。您将看到不同的图标大小有不同的“anchor”值。例如anchor: [24, 0]，。 - Anto Jurković

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);

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

- chimbu

---

对于v3版的Google地图API，“anchor”已经更改为“anchorText”。我花了几个小时才搞清楚这个问题。来源：https://github.com/angular-ui/angular-google-maps/issues/1124 - Trynkiewicz Mariusz

必须说，除了content-box之外的任何box-sizing都会对此造成混乱。 - fxck

Answer 2

我添加了这个回答，因为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等），从而进行一些数学计算来使高度、宽度和锚文本变大/变小。当然，如果你愿意，也可以仅提供一个对象到样式数组中，该对象将应用于每个聚类图标，但这个例子提供了一些灵活性和自定义性，如果你需要的话。

- Devin Fields

Answer 3

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

/**
 * 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;
        }

- JdAkram