Google maps api v3：MarkerClusterer Icon上的文本位置(Google maps api v3: Text position on MarkerClusterer I

Google maps api v3：MarkerClusterer Icon上的文本位置(Google maps api v3: Text position on MarkerClusterer Icon)

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

我怎么能这样做？

谢谢！

I´m trying to set a different position to the text showed into a MarkerClusterer Icon when calculator function runs. It is possible to move the text to the top inside the icon a little bit more?

How could I do that?

thanks!

最满意答案

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

在该代码中有一个名为ClusterIcon.prototype.createCss() ...的方法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会发生什么，它看起来像这样：

..上面有趣的部分是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元素中，然后您可以根据需要调整各种选项。

以下是所有这些的工作示例： 请参阅jsfiddle

I am assuming that you are using the code which I think you are using, googles markercluster.. in this case you need to for example, take the markerclusterer.js code and modify it directly.

Inside that code there is a method called ClusterIcon.prototype.createCss() ... which basically sets the styles for each cluster element (they are only divs really).. if you wan't to change number text to display close to the top, you could for example modify line-height attribute.

Here is the example:

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

Now if I view what happens to div element HTML, it looks like this:

..the interesting part above is ofc. the line-height: 43px;

As you can see, its only div with some inline css styles. You also might notice that number 2 of the cluster is not inside paragraph its just number 2 in a div. Therefore, if you wan't to style it further you could look into method called:

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

... and modify it to place more HTML to the actual div element, then you have variety of options tune it as you like.

Here is the working example of all this: see jsfiddle

更多推荐