单击缩放上的markerClusterer

Posted 2023-05-06

【中文标题】单击缩放上的markerClusterer

【英文标题】：markerClusterer on click zoom

【发布时间】：2011-08-08 07:25:05

【问题描述】：

我刚刚在我的谷歌地图中添加了一个 MarkerClusterer。它工作得很好。

我只是想知道单击集群时是否有任何方法可以调整放大行为。如果可能，我想更改缩放级别。

有什么方法可以实现吗？

谢谢

【参考方案1】：

对 MarkerClusterer 源代码进行了更新，可以更轻松地访问点击事件：

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) 
    // your code here
);

其中 'markerCluster' 是 MarkerCluster 对象。 在函数内部你也可以访问

cluster.getCenter();
cluster.getMarkers();
cluster.getSize();

我使用它来切换到不同的地图类型，因为我使用自定义图块集以便更轻松地查看较低缩放级别：

map.setCenter(cluster.getCenter()); // zoom to the cluster center
map.setMapTypeId(google.maps.MapTypeId.ROADMAP); // switch map type
map.setOptions(myMapOptions); // apply some other map options (optional)

问候 杰克

【讨论】：

这是否记录在某处？

记录在这里：raw.githubusercontent.com/googlemaps/v3-utility-library/master/…

效果很好！只是不要忘记将 MarkerClusterer 选项 zoomOnClick 设置为 false

@ApolloData：该链接现在会引发 404 错误。

【参考方案2】：

您可以在不修改源代码的情况下通过在 clusterclick markerClusterer 事件上使用监听器来做到这一点：

var mcOptions = gridSize: 40, maxZoom: 16, zoomOnClick: false, minimumClusterSize: 2;
markerClusterer = new MarkerClusterer(map, markers, mcOptions);

google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster)
    map.setCenter(markerClusterer.getCenter());
    map.setZoom(map.getZoom()+1);
);

即。我设置 zoomOnClick=false 以更好地控制地图缩放行为，以控制每次点击触发的缩放量和缩放位置。

【讨论】：

zoomOnClick: false 是关键

将 zoomOnclick 设置为 false 会强制您必须双击，这很糟糕。 maxZoom 似乎只适用于双击集群。

我得到错误 markerClusterer.getCenter is not a function。

【参考方案3】：

我按照建议修改了 clusterclick 事件：

/**
* Triggers the clusterclick event and zoom's if the option is set.
*/
ClusterIcon.prototype.triggerClusterClick = function() 
var markerClusterer = this.cluster_.getMarkerClusterer();

// Trigger the clusterclick event.
google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

if (markerClusterer.isZoomOnClick()) 
// Zoom into the cluster.
// this.map_.fitBounds(this.cluster_.getBounds());

// modified zoom in function
this.map_.setZoom(markerClusterer.getMaxZoom()+1);

 
;

效果很好！非常感谢

【讨论】：

以上代码与原代码有什么区别？

@Kabkee 不同的是这实际上改变了缩放，上面的代码是一个骨架。

【参考方案4】：

似乎 API 只允许您切换缩放功能

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

所以你必须编辑源代码，它似乎在第 1055 行

/**
 * Triggers the clusterclick event and zoom's if the option is set.
 */
ClusterIcon.prototype.triggerClusterClick = function() 
  var markerClusterer = this.cluster_.getMarkerClusterer();

  // Trigger the clusterclick event.
  google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

  if (markerClusterer.isZoomOnClick()) 
    // Zoom into the cluster.
    this.map_.fitBounds(this.cluster_.getBounds());
  
;

【参考方案5】：

如果有人需要在coffeescript中编写此函数，我将最佳答案和标记答案合并为一个代码sn-p。

mcOptions =
  maxZoom: 16

markerCluster = new MarkerClusterer map, markers, mcOptions
# listener if a cluster is clicked
google.maps.event.addListener markerCluster, "clusterclick", (cluster) ->
  if markerCluster.isZoomOnClick() # default is true
    #get bounds of cluster
    map.fitBounds cluster.getBounds()
    #zoom in to max zoom plus one. 
    map.setZoom markerCluster.getMaxZoom() + 1

此代码检查设置为单击时放大。如果它放大到最大缩放加一，并以集群为中心。非常简单的代码。