与markercluster和角单张-指令集群捕获点击事件 [英] Capturing click events on clusters with markercluster and angular-leaflet-directive

问题描述

我玩href=\"https://github.com/tombatossals/angular-leaflet-directive\" rel=\"nofollow\">角单张-指令的 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.

角传单，指令还与 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:

• 请在集群用户双击以放大。目前正在做一个集群上单击鼠标，将放大的标记。 <一href=\"http://tombatossals.github.io/angular-leaflet-directive/examples/markers-clustering-10000.html\"相对=nofollow>见例如。

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

如何监听集群click事件，并获取群集在所有的标记名称。
对于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);
});

但我不知道我应该听使用角单张-指令什么事件。

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

推荐答案

至于你的第一个问题的话，你就必须挂钩DoubleClick和重写通常click事件之后它传递火（点击）命令。比它真的值得可能更麻烦，特别是在移动设备上 - 而不是我可以轻松解决。

As far as your first question goes, you'll have to hook the doubleclick and pass it the fire('click') command after overriding the usual click event. Probably more trouble than its really worth, especially on mobile - and not something I can easily solve.

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

Regarding your second question, I have just solved it.

$ scope.openMarker 是一个的参考在我玉模板NG-点击事件附加到一个 NG-重复这拉的图像和相应的ID从数据库中。

$scope.openMarker is a reference to an ng-click event in my jade template that is attached to an ng-repeat which pulls images and their id's from the database.

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

                });

        };

您可以阅读更多关于我是怎么来到这个解决方案这里在github上。

You can read more about how I came to this solution here at github.

这篇关于与markercluster和角单张-指令集群捕获点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！