Google Map Clusterer [英] Google Map Clusterer

查看:81
本文介绍了Google Map Clusterer的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经使集群标记在某些标记上成功运行,但是,如果该区域过于拥挤,集群将不会出现.我正在使用Javascript API.

I've got the Cluster Marker working successfully on some markers, however, it seems that if the area is too congested the cluster won't appear. I'm using the Javascript API.

  this.map = new google.maps.Map(map, mapOptions);
  this.markers = data.map((location) => {
    if (location.location === null) return
    const marker = new google.maps.Marker({
      position: { lat: location.location.coordinates[0], lng: location.location.coordinates[1]},
      map: this.map
    });
    return marker
  });
  const markerCluster = new MarkerClusterer(this.map, this.markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

我会发布图片,但我需要更多声誉.

I would post an image but I need more reputation.

我应该切换到热图,还是集群库的已知限制?

Should I switch to a heatmap or is this a known limitation of the cluster library?

编辑 似乎当我将标记数限制为179时,会将它们全部聚类,但是当我将标记数限制为180时,第180个标记放置在聚类之外

EDIT It seems when I limit the amount of markers to 179, it clusters them all, but when I limit to 180, the 180th is placed outside the cluster

推荐答案

MarkerClusterer库中没有180个标记的限制.当您查看此示例时,您可以看到根据gridSize聚集了400个标记.

There is no limitation of 180 markers in the MarkerClusterer library. When you have a look at this example you can see over 400 markers clustered depending on the gridSize.

您的gridSize不应太小,以便聚集更大的标记区域,但是您似乎使用了默认选项,该示例在您的示例中可以使用.

Your gridSize shouldn't be too small so a bigger area of markers is clustered, but you seem to use the default options, which should work in your example.

创建标记时不必定义地图-markerClusterer会在地图上显示它们.

You don't have to define the map when creating the markers - the markerClusterer takes care of displaying them on the map.

this.markers = [];
data.forEach(function(entry) {
    if (entry.location === null) return
    marker = new google.maps.Marker({
        position: { 
            lat: location.location.coordinates[0],
            lng: location.location.coordinates[1]
        }
    });
    markers.push(marker);
});
markerCluster = new MarkerClusterer(this.map, this.markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

还请检查markerClusterer的以下选项,以根据需要进行配置:

Also check out the following options of the markerClusterer to configure it to your needs:

  • gridSize:群集的网格大小(以像素为单位).
  • maxZoom:标记可以成为群集一部分的最大缩放级别.
  • minimumClusterSize:标记中要包含的最小标记数 在标记被隐藏并显示计数之前进行聚类.
  • gridSize: The grid size of a cluster in pixels.
  • maxZoom: The maximum zoom level that a marker can be part of a cluster.
  • minimumClusterSize: The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.

这篇关于Google Map Clusterer的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆