Question

我试图在计算器功能运行时为显示在MarkerClusterer图标中的文本设置不同的位置。可以将文本移动到图标内部的顶部一点点吗？

我怎么能这样做？

谢谢！

Answer 1

我假设您正在使用我认为您正在使用的代码，googles markercluster ..在这种情况下，您需要采用markerclusterer.js代码并直接修改它。

在该代码中有一个名为ClusterIcon.prototype.createCss() ...的方法，它基本上为每个集群元素设置样式（它们实际上只是div）..如果你不想改变数字文本显示接近于例如，您可以修改line-height属性。

以下是示例：

/**
 * Create the css text based on the position of the icon.
 *
 * @param {google.maps.Point} pos The position.
 * @return {string} The css style text.
 */
ClusterIcon.prototype.createCss = function(pos) {

  var style = [];
  style.push('background-image:url(' + this.url_ + ');');
  var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0';
  style.push('background-position:' + backgroundPosition + ';');

  if (typeof this.anchor_ === 'object') {
    if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
        this.anchor_[0] < this.height_) {
      style.push('height:' + (this.height_ - this.anchor_[0]) +
          'px; padding-top:' + this.anchor_[0] + 'px;');
    } else {

      //
      // See the (this.height_ - 10) for line-height
      //

      style.push('height:' + this.height_ + 'px; line-height:' + (this.height_ - 10) +
          'px;');
    }
    if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
        this.anchor_[1] < this.width_) {
      style.push('width:' + (this.width_ - this.anchor_[1]) +
          'px; padding-left:' + this.anchor_[1] + 'px;');
    } else {
      style.push('width:' + this.width_ + 'px; text-align:center;');
    }
  } else {

    //
    // See the (this.height_ - 10) for line-height
    //

    style.push('height:' + this.height_ + 'px; line-height:' +
        (this.height_ - 10) + 'px; width:' + this.width_ + 'px; text-align:center;');
  }

  var txtColor = this.textColor_ ? this.textColor_ : 'black';
  var txtSize = this.textSize_ ? this.textSize_ : 11;

  style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
      pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
      txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');

  return style.join('');
};

现在，如果我查看div元素HTML会发生什么，它看起来像这样：

<div style="background-image: url(http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png); height: 53px; line-height: 43px; width: 53px; text-align: center; cursor: pointer; top: 173.68359152317203px; left: 273.60742400000004px; color: black; position: absolute; font-size: 11px; font-family: Arial, sans-serif; font-weight: bold; background-position: 0px 0px;">2</div>

..上面有趣的部分是ofc。 line-height: 43px;

正如您所看到的，它唯一的div具有一些内联css样式。您还可能会注意到，群集中的数字2不在div中，而在div中仅为数字2。因此，如果您不想进一步设计它，可以查看名为：

的方法

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

    // For debugging purposes so you know what you are doing
    // console.log(this.div_);

    // The interesting part here is the this.div_.innerHTML    
    // You could for example add more elements inside this.div_, 
    // now it just adds the number

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

...并修改它以将更多HTML放到实际的div元素中，然后您可以根据需要调整各种选项。

以下是所有这些的实际示例： see jsfiddle

Google maps api v3：MarkerClusterer Icon上的文本位置

1 个答案: