Question

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

enter image description here

我试过这段代码：

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

但它显示如下：

enter image description here

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

提前感谢...

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的答案使我感到震惊，但并没有完全*解释问题。 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等）以进行一些数学运算，以使高度，宽度和锚文本变大/变小。当然，如果愿意，您也可以只向样式数组提供一个对象，该对象将应用于每个群集图标，但是此示例在需要时提供了一些灵活性和自定义功能。

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

3 个答案: