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

我正在使用google map api v3，我想显示自定义群集pin，编号对齐方式如下：

我尝试过以下代码：

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

但它的表现是这样的：

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

---

提前感谢…

我已经尝试过此代码，但效果良好：

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]。

如果正在使用，则可以重写该库代码

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

---

添加这个答案是因为尽管chimbu的答案让我开始思考，但它并没有完全解释这个问题。styles数组中的每个对象都与您可以提供的五个集群图标中的一个相关联，而且提供styles对象似乎会覆盖您的imagePath属性（因为在我的例子中，只提供一个没有url的styles对象，期望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等），以进行一些数学运算，使高度、宽度和anchortext变大/变小。当然，您也可以只向样式数组提供一个对象，如果您愿意，该对象将应用于每个集群图标，但如果您需要，此示例提供了一点灵活性和自定义功能。

您在该蓝色框上应用了什么css？那个号码是否在那个盒子里。蓝色盒子是图像而不是css。号码不在蓝色的盒子里。好的。蓝盒子和那个戒指合并了吗？如果是，那么就分享css。实际上，共享该no.question的父级的css。我没有使用任何额外的css。请尝试使用

achor

值（标签文本的锚定位置）。例如，检查。对于不同的图标大小，您将看到不同的

锚定值。例如
anchor:[24,0]，
对于v3谷歌地图API
anchor
更改为
anchorText
。花了几个小时才弄明白这一点。资料来源：必须指出的是，除了内容框以外的任何框大小都会弄糟这一点
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]
      }))
    ]
  });