我使用谷歌地图api v3,我想显示数字对齐的自定义群集引脚,如下所示:
我试过这段代码:
var clusterOptions = {
zoomOnClick: false,
styles: [{height: 36, width: 36, url: location.href.substring(0, location.href.lastIndexOf("/")+1)+'images/pushpin_cluster.png' }]}
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
但它显示如下:
如何将群集图标编号对齐到蓝色框中。
提前感谢...
答案 0 :(得分:6)
我试过这段代码运行良好:
var clusterOptions = {
zoomOnClick: false,
styles: [{ anchor:[2,22],textColor: "white",height: 36, width: 36, url: location.href.substring(0, location.href.lastIndexOf("/")+1)+'images/pushpin_cluster.png' }]}
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
anchor:[2,22] - 从群集图标中心到文本标签居中和绘制位置的位置(以像素为单位)。格式为[yoffset,xoffset],其中yoffset从中心向下移动时增加,xoffset增加到中心右侧。默认值为[0,0]。
答案 1 :(得分:1)
如果你正在使用markerclustererplus library,那么你可以覆盖该库代码。
/**
* 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);
var innerHtml;
if (this.cluster_.markers_.length > 0) {
innerHtml = "<div><p id='clusterIconText'>" + this.sums_.text + "</p></div>";
}
this.div_.innerHTML = innerHtml;
}
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(this.div_);
var that = this;
google.maps.event.addDomListener(this.div_, 'click', function() {
that.triggerClusterClick();
});
};
通过css你可以根据这个要求改变风格
#clusterIconText
{
margin-top:-70px;
margin-left:-70px;
color:#f2f2f2;
}
答案 2 :(得分:0)
添加此答案的原因是,尽管chimbu的答案使我感到震惊,但并没有完全*解释问题。 styles数组中的每个对象都与您可以提供的五个群集图标之一相关联,并且似乎提供样式对象将覆盖您的imagePath属性(在我的情况下,因为仅提供一个没有url的styles对象,期望imagePath仍然工作,破坏了一切)。这是我现在使用的代码:
new MarkerClusterer(map, [], {
maxZoom: 16,
ignoreHidden: true,
styles: [
..._.map([1, 2, 3, 4, 5], () => ({
textColor: 'black',
url: './img/cluster/m1.png',
height: 52,
width: 53,
anchorText: [2, 2]
}))
]
});
如果有5张不同的图像,则可以点击回调的第一个参数并调整数字(1、2等)以进行一些数学运算,以使高度,宽度和锚文本变大/变小。当然,如果愿意,您也可以只向样式数组提供一个对象,该对象将应用于每个群集图标,但是此示例在需要时提供了一些灵活性和自定义功能。