markerclusterer：集群图标的锚点偏移答案

【问题标题】：markerclusterer: anchor offset for cluster iconsmarkerclusterer：集群图标的锚点偏移
【发布时间】：2011-02-01 18:57:15
【问题描述】：

我正在尝试稍微偏移由 Google Maps Markerclusterer (V3) 创建的集群图标。没有修改现有代码，我找不到这样做的方法。有人有想法吗？

您可以在其中提供自定义图像 URL 的 Styles 对象接受锚属性，但这是为了抵消生成的标记项计数。

谢谢！

【问题讨论】：

标签： google-maps markerclusterer

【解决方案1】：

正确的做法是像这样调整anchorIcon 属性：

var clusterStyles = [
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
},
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
},
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
}
];

var mcOptions = {
    styles: clusterStyles
};

var markerCluster = new MarkerClusterer(map, markers, mcOptions);

【讨论】：

但源代码中没有使用anchorIcon var name

【解决方案2】：

接受的答案对我来说效果不够好 - 向图标图像添加透明空间可能会由于对象大小的增加而改变点击和悬停事件的行为方式。

我会使用anchorIcon 属性，但它仅在Marker Clusterer Plus 中可用，而不是其他Marker Clusterer 插件（我正在使用）。

对于那些特别想使用 Marker Clusterer 的人 - 您可以覆盖 ClusterIcon.prototype.getPosFromLatLng_。 ClusterIcon 对象是全局的，所以我们可以在任何脚本文件的顶层修改它，而不会弄乱插件的源代码。

这会将标记锚定到图标的底部：

ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) {
  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
  pos.x -= parseInt(this.width_ / 2);
  pos.y -= parseInt(this.height_);
  return pos;
};

【讨论】：

@ashleedawg 你只需要运行一次，这样修改后的函数就会替换原来的getPosFromLatLng_，所以我想说把它放在任何脚本文件的顶层。如果您使用 Marker Clusterer Plus，请参阅 @NXT 的 anchorIcon 解决方案

【解决方案3】：

我修改了marcerclusterer.js的代码，通过修改以下两个函数来支持anchorText参数：

/**
 * Sets the icon to the the styles.
 */
ClusterIcon.prototype.useStyle = function() {
  var index = Math.max(0, this.sums_.index - 1);
  index = Math.min(this.styles_.length - 1, index);
  var style = this.styles_[index];
  this.url_ = style['url'];
  this.height_ = style['height'];
  this.width_ = style['width'];
  this.textColor_ = style['textColor'];
  this.anchor_ = style['anchor'];
  this.anchorText_ = style['anchorText']; //added to support anchorText parameter by Frane Poljak, Locastic
  this.textSize_ = style['textSize'];
  this.backgroundPosition_ = style['backgroundPosition'];
};


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

      ////added to support anchorText parameter by Frane Poljak, Locastic

      if (typeof this.anchorText_ === 'object' && typeof this.anchorText_[0] === 'number' && typeof this.anchorText_[1] === 'number') {
          this.div_.innerHTML = '<span style="position:relative;top:' + String(this.anchorText_[0]) + 'px;left:' + String(this.anchorText_[1]) + 'px;">' + this.sums_.text + '</span>'
      } else this.div_.innerHTML = this.sums_.text;
  } 

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

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

【讨论】：

这解决了我的问题。你应该为那个 repo 创建一个 PR。

【解决方案4】：

您可以在群集图标的 PNG 的一侧添加一些透明空间，以便您希望居中的图标部分实际上也在您的 PNG 中居中。这不会使图片的权重增加超过几个字节。

【讨论】：

是的，这就是我最终要做的。不是最漂亮的解决方案，但它有效。谢谢！

【解决方案5】：

anchor/anchorIcon/anchorText 属性对我不起作用...所以我做了一种解决方法：

我使用setCalculator()函数设置集群文本：

https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

当我设置集群文本属性时，我用<span> 包装值，像这样：

markerCluster.setCalculator(function (markers) {
   return {
      text: '<span class="myClass">' + value+ '</span>',
      index: index                   
   };
});

现在您可以使用“.myClass”控制集群标签位置：

span.myClass{
   position: relative;
   top: -15px;
   .....
}

【讨论】：