作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试更改 Google Maps API 标记聚类器的级别大小。默认情况下,小尺寸标记(蓝色图标/m1):2-9 个标记,中尺寸尺寸(黄色图标/m2):10-100 个标记,大尺寸(红色图标/m3)尺寸:101-250 个标记。 (如果我错了请纠正我)。
我想将级别大小的值更改为小于默认值。我找到了另一个具有相同主题的线程,但我仍然没有明确指出。
这是我指的 Google Maps API 标记集群图标:
Google Maps API Marker Clusterer Icon
PS:我没有提到如何更改集群图标,我的意思是如何更改大小值。例如:如何更改标记的级别大小,使其聚集为蓝色 (m1)、黄色 (m2) 和红色 (m3)?就像我之前提到的默认大小,对于 m1,它包含 2-9 个标记,我可以将大小值更改为仅 2-5 个标记吗?
最佳答案
您需要创建自定义计算器
函数。来自 source (对于 Google 文档中引用的版本,请务必使用您未提供的版本的文档进行验证)。默认计算器
功能:
/**
* The function for calculating the cluster icon image.
*
* @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
* @param {number} numStyles The number of styles available.
* @return {Object} A object properties: 'text' (string) and 'index' (number).
* @private
*/
MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
var index = 0;
var count = markers.length;
var dv = count;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
index = Math.min(index, numStyles);
return {
text: count,
index: index
};
};
设置它的函数(描述它的返回值,索引是图标数组的索引,文本是要在集群上显示的文本):
/**
* Set the calculator function.
*
* @param {function(Array, number)} calculator The function to set as the
* calculator. The function should return a object properties:
* 'text' (string) and 'index' (number).
*
*/
MarkerClusterer.prototype.setCalculator = function(calculator) {
this.calculator_ = calculator;
};
关于javascript - Google Maps API 标记聚类器更改级别大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44351686/
我是一名优秀的程序员,十分优秀!