使用 markercluster 和 angular-leaflet-directive 捕获集群上的点击事件答案

【问题标题】：Capturing click events on clusters with markercluster and angular-leaflet-directive使用 markercluster 和 angular-leaflet-directive 捕获集群上的点击事件
【发布时间】：2014-12-24 01:29:03
【问题描述】：

我正在使用angular-leaflet-directive，通过鼠标单击获取标记名称非常简单。我只是监听leafletDirectiveMarker.click 事件，然后访问args.markerName。

angular-leaflet-directive 也适用于markercluster，因此我可以对具有相同坐标或附近坐标的标记进行聚类。但是，我想做以下事情，但从文档中不清楚如何做：

让用户双击集群放大。当前，单击集群将放大标记。 see example.
如何监听集群上的点击事件并获取集群中的所有标记名称。 clustermarker 的文档有一个集群事件：
```
markers.on('clusterclick', function (a) {
console.log('cluster ' + a.layer.getAllChildMarkers().length);
});
```
但我不确定使用 angular-leaflet-directive 应该听什么事件。

【问题讨论】：

标签： angularjs angularjs-directive leaflet

【解决方案1】：

就您的第一个问题而言，您必须在覆盖通常的单击事件后挂钩双击并传递 fire('click') 命令。可能比它真正的价值更多的麻烦，尤其是在移动设备上——这不是我可以轻易解决的。

关于你的第二个问题，我刚刚解决了。

$scope.openMarker 是我的翡翠模板中对ng-click 事件的引用，该事件附加到ng-repeat，该ng-repeat 从数据库中提取图像及其ID。

         $scope.openMarker = function(id) {
            var _this = [];
            _this.id = id;
            leafletData.getMarkers()
                .then(function(markers) {
                    $scope.london = {
                        lat: $scope.markers[_this.id].lat,
                        lng: $scope.markers[_this.id].lng,
                        zoom: 19
                    };                  
                    var _markers = [];
                    _markers.currentMarker = markers[_this.id];
                    _markers.currentParent = _markers.currentMarker.__parent._group;
                    _markers.visibleParent = _markers.currentParent.getVisibleParent(markers[id]);
                    _markers.markers = markers;
                    return _markers;
                }).then(function(_markers){
                    if (_markers.visibleParent !== null) {
                        _markers.visibleParent.fire('clusterclick');
                    } else {
                        _markers.currentMarker.fire('click');
                    }
                    return _markers;
                }).then(function(_markers){
                     _markers.currentParent.zoomToShowLayer(_markers.markers[ _this.id ], function() {
                        $scope.hamburg = {
                            lat: $scope.markers[_this.id].lat,
                            lng: $scope.markers[_this.id].lng,
                            zoom: 19
                        };
                        if (_markers.currentMarker !== null) {
                            _markers.currentMarker.fire('click');
                        } else {
                            _markers.visibleParent.fire('clusterclick');
                            _markers.currentMarker.fire('click');
                        }
                    });

                });

        };

你可以阅读更多关于我是如何找到这个解决方案的here at github。

【讨论】：

【解决方案2】：

和许多人一样，我也进行了很长时间的搜索，但没有任何结果。在尝试另一种方法时，我遇到了这个：

$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);

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

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

【讨论】：