Google maps markerclusterer：群集图标的定位偏移

我试图稍微抵消谷歌地图Markerclusterer（V3）创建的集群图标。除了修改现有的代码，我找不到一种方法来做这件事。有人有主意吗

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

---

谢谢

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

正确的方法是调整

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

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

---

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

我会使用

anchorIcon

属性，除非它只在中可用，而不是其他插件（我正在使用）

对于那些特别希望使用Marker Clusterer的用户，您可以覆盖

ClusterIcon.prototype.getPosFromLatLng\uuz

。

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

---

anchor/anchorIcon/anchorText属性对我不起作用……所以我做了一些变通：

我使用

setCalculator（）

函数设置集群文本：

设置群集文本属性时，我使用

包装值， 大概是这样的：

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

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

---

我修改了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();
  });
};

/**
*将图标设置为样式的默认值。
*/
ClusterIcon.prototype.useStyle=函数（）{
var index=Math.max（0，此.sums\ux.index-1）；
index=Math.min（this.styles..length-1，index）；
var style=this.styles_u2;[index]；
this.url=样式['url']；
this.height=样式['height']；
this.width=样式['width']；
this.textColor=样式['textColor']；
this.anchor=样式['anchor']；
this.anchorText 979;=style['anchorText']]；//由Frane Poljak，Locastic添加以支持anchorText参数
this.textSize=样式['textSize']；
this.backgroundPosition=样式['backgroundPosition']；
};
/**
*将集群图标添加到dom。
*@忽略
*/
ClusterIcon.prototype.onAdd=函数（）{
this.div=document.createElement（'div'）；
如果（此.可见）{
var pos=this.getPosFromLatLng（this.center）；
this.div_.style.cssText=this.createCss（pos）；
////由Frane Poljak，Locastic添加以支持anchorText参数
if（typeof this.anchorText\u0=='object'和&typeof this.anchorText\u0=='number'和&typeof this.anchorText\u1=='number'）{
this.div.innerHTML=''+this.sums..text+''
}else this.div_u2;.innerHTML=this.sums_2;.text；
} 
var panes=this.getPanes（）；
panes.overlyMouseTarget.appendChild（this.div_41;；
var=这个；
google.maps.event.addDomListener（this.div_'click'，function（）{
.triggerClusterClick（）的；
});
};

是的，这就是我最后做的。这不是最漂亮的解决方案，但很有效。谢谢这解决了我的问题。您应该为该回购创建一个PR。但在source中没有使用anchorIcon var名称code@ashleedawg只需运行一次，修改后的函数就可以替换原来的

getPosFromLatLng\uu

，因此我建议将它放在任何脚本文件的顶层。如果您正在使用Marker Clusterer Plus，请参阅@NXT提供的

anchorIcon

解决方案