使用 markercluster 和 angular-leaflet-directive 捕获集群上的点击事件 [英] Capturing click events on clusters with markercluster and angular-leaflet-directive

查看:31
本文介绍了使用 markercluster 和 angular-leaflet-directive 捕获集群上的点击事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 angular-leaflet-directive,并获得标记鼠标点击的名字是直截了当的.我只是监听 leafletDirectiveMarker.click 事件,然后访问 args.markerName.

I'm playing with the angular-leaflet-directive, and getting the marker names from a mouse click is straight forward. I just listen for the leafletDirectiveMarker.click event and then access args.markerName.

angular-leaflet-directive 也适用于 markercluster,因此我可以将具有相同的坐标或附近的坐标.但是,我想执行以下操作,但是文档中不清楚如何执行此操作:

angular-leaflet-directive also works with markercluster, so I can cluster markers that have the same coordinates or ones that are close by. However, I would like to do the following, but it is not clear from the documentation on how to do it:

  • 让用户双击集群进行放大.当前单击集群将放大标记.参见示例.

  • Make user double-click on cluster to zoom in. Currently doing a single click on a cluster will zoom in on the markers. see example.

如何监听集群上的点击事件并获取集群中的所有标记名称.clustermarker 的文档有一个集群事件:

How to listen for click event on cluster and get all marker names in the cluster. The documentation for clustermarker has a cluster event:

markers.on('clusterclick', function (a) {
console.log('cluster ' + a.layer.getAllChildMarkers().length);
});

但我不确定我应该使用 angular-leaflet-directive 收听什么事件.

But I'm not sure what event I should be listening to using angular-leaflet-directive.

推荐答案

和很多人一样,我也搜索了很长时间没有结果.在尝试另一种方法时,我遇到了这个:

Much like many people, I too had a long search with no results. While experimenting with another method, I came across this:

$timeout(function(){
    leafletData.getLayers().then(function(layers) {
        $scope.markerClusterGrp = layers.overlays.locations;
        var clusters            = $scope.markerClusterGrp.getLayers();
        $scope.markerClusterGrp.on('clustermouseover', function (a) {
            var clusterObjects  = a.layer.getAllChildMarkers();
            console.log(clusterObjects);
        });
        $scope.markerClusterGrp.on('clusterclick', function (a) {
            var clusterObjects = a.layer.getAllChildMarkers();
            console.log(clusterObjects);
        });
    });

},1000);

它的工作原理是一样的,不同之处在于它需要超时才能等待图层使用所有标记进行渲染(我的理解,如果错误,请纠正我:-)).

It works the same, the difference is that it requires a timeout in order to wait for the layer to render with all markers (my understanding, correct me if wrong :-) ).

我希望这可以帮助任何寻找角度解决方案的人.请记住在您的控制器依赖项中包含 $timeout .

I hope this helps anyone searching for an angular solution. Just remember to include $timeout in your controller dependencies.

这篇关于使用 markercluster 和 angular-leaflet-directive 捕获集群上的点击事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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