【问题标题】:Google Maps API Marker Clusterer Change Level SizeGoogle Maps API Marker Clusterer 更改级别大小
【发布时间】:2017-11-05 05:00:06
【问题描述】:

我正在尝试更改 Google Maps API Marker Clusterer 的级别大小。 默认情况下,标记小尺寸(蓝色图标/m1):2-9 个标记,中等尺寸(黄色图标/m2):10-100 个标记,大尺寸(红色图标/m3)尺寸:101-250 个标记。 (如果我错了,请纠正我)。

我想将级别大小的值更改为小于默认值。我找到了另一个主题相同的主题,但我仍然没有明确指出。

这是我的意思的 Google Maps API Marker Cluster 图标:

Google Maps API Marker Clusterer Icon

PS:我没有提到如何更改集群图标,我的意思是如何更改大小的值。例如:如何更改标记的级别大小,使其聚集为蓝色(m1)、黄色(m2)和红色(m3)?我之前提到的默认大小,对于 m1,它包含 2-9 个标记,我可以将大小值更改为 2-5 个标记吗?

【问题讨论】:

标签: javascript google-maps google-maps-api-3 markerclusterer


【解决方案1】:

您需要创建一个自定义Calculator 函数。来自source(Google 文档中引用的版本,请务必使用您未提供的版本的文档进行验证)。默认calculator函数:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-12-02
    • 2012-01-29
    • 2013-01-25
    • 2015-07-25
    • 1970-01-01
    • 2016-01-11
    • 2020-11-07
    • 2012-07-02
    相关资源
    最近更新 更多