Javascript 单击缩放时的markerClusterer
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5710568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
markerClusterer on click zoom
提问by AlexBrand
I just added a MarkerClusterer to my google map. It works perfectly fine.
我刚刚在我的谷歌地图上添加了一个 MarkerClusterer。它工作得很好。
I am just wondering if there is any way of adjusting the zoom-in behaviour when the cluster is clicked. I would like to change the zoom level if possible.
我只是想知道是否有任何方法可以在单击群集时调整放大行为。如果可能,我想更改缩放级别。
Is there any way of achieving this?
有没有办法实现这一目标?
Thanks
谢谢
采纳答案by AlexBrand
I modified the clusterclick event as suggested:
我按照建议修改了 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);
}
};
It works great! Thanks a lot
它工作得很好!非常感谢
回答by Hyman
There has been an update to the MarkerClusterer source code, allowing much easier access to the click event:
MarkerClusterer 源代码已更新,可以更轻松地访问单击事件:
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
// your code here
});
where 'markerCluster' ist the MarkerCluster object. Inside the function you may also access
其中 'markerCluster' 是 MarkerCluster 对象。在函数内部,您还可以访问
cluster.getCenter();
cluster.getMarkers();
cluster.getSize();
I use this to switch to a different map type, as I use a custom tile set for easier overview on lower zoom levels:
我使用它来切换到不同的地图类型,因为我使用自定义图块集以便在较低缩放级别上更轻松地概览:
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)
Regards Hyman
问候Hyman
回答by Natacha Beaugeais
You can do this without modifying the source code by using a listener on the clusterclick markerClusterer event:
您可以在不修改源代码的情况下通过在 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);
});
ie. I set zoomOnClick=false to have finer control of the map zooming behaviour to control the zoom amount and zoom location each click triggers.
IE。我设置 zoomOnClick=false 以更好地控制地图缩放行为,以控制每次单击触发的缩放量和缩放位置。
回答by Galen
It appears the API will only let you toggle the zoom functionality
看来 API 只会让您切换缩放功能
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html
So you will have to edit the source, it appears to be on line 1055
所以你必须编辑源代码,它似乎在第 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());
}
};
回答by Whitecat
If anyone needs to write this function in coffeescript I merged the top answer and the marked answer into one code snippet.
如果有人需要在 coffeescript 中编写此函数,我会将最佳答案和标记答案合并到一个代码片段中。
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
This code check is zoom on click is set. If it is zoom in to max zoom plus one, and center on the cluster. Very simple code.
此代码检查设置单击时缩放。如果放大到最大缩放加一,并以集群为中心。非常简单的代码。