angularjs - 使用 MarkerCluster 和 Angular-Leaflet-Directive 捕获集群上的点击事件

Question

我正在玩 angular-leaflet-directive ，并且通过单击鼠标即可直接获取标记名称。我只是监听 leafletDirectiveMarker.click 事件，然后访问 args.markerName。

Angular-leaflet-directive 也适用于 markercluster ，这样我就可以对具有相同坐标或邻近坐标的标记进行聚类。但是，我想执行以下操作，但文档中并不清楚如何执行此操作:

• 让用户双击集群进行放大。目前，单击群集即可放大标记。 see example .

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

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

  但我不确定我应该使用 Angular-leaflet-directive 监听什么事件。

Answer 1

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

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

$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 .