Question

我正在玩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听什么事。

Answer 1

就你的第一个问题而言，你必须挂钩双击并在覆盖通常的点击事件后将其传递给fire（'click'）命令。可能比真正的价值更麻烦，特别是在移动设备上 - 而不是我能轻易解决的问题。

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

$scope.openMarker是对我的jade模板中ng-click事件的引用，该事件附加到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。

Answer 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。

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

2 个答案: