gpt4 book ai didi

google-maps-api-3 - 谷歌地图 api v3 : Text position on MarkerClusterer Icon

转载 作者:行者123 更新时间:2023-12-04 23:23:21 24 4
gpt4 key购买 nike

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

我怎么能那样做?

谢谢!

最佳答案

我假设您正在使用我认为您正在使用的代码,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 中的第 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-3 - 谷歌地图 api v3 : Text position on MarkerClusterer Icon,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22711028/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com