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

2024-02-11

我正在玩角度传单指令 https://github.com/tombatossals/angular-leaflet-directive,通过单击鼠标即可直接获取标记名称。我只是听leafletDirectiveMarker.click事件然后访问args.markerName.

角度传单指令也适用于标记簇 https://github.com/Leaflet/Leaflet.markercluster,这样我就可以对具有相同坐标或邻近坐标的标记进行聚类。但是,我想执行以下操作,但文档中并不清楚如何执行此操作:

  • 让用户双击集群进行放大。目前,单击群集即可放大标记。参见示例 http://tombatossals.github.io/angular-leaflet-directive/examples/markers-clustering-10000.html.

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

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

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


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

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

$scope.openMarker是对一个的引用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');
                        }
                    });

                });

        };

您可以阅读有关我如何得出此解决方案的更多信息在github上 https://github.com/tombatossals/angular-leaflet-directive/issues/320#issuecomment-77506598.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 MarkerCluster 和 Angular-Leaflet-Directive 捕获集群上的点击事件 的相关文章

  • Angular Bootstrap $modal 如何动画化?

    我没有使用任何引导样式 我正在完全定制一切 制作动画相当简单 因为 modal uses fade in 我能够覆盖这些样式并且效果很好 但是模态是如何动画出来的呢 我没有看到任何类别被应用或删除 它会立即从 DOM 中删除 我怎样才能定制
  • Angular JS:当我们已经有了具有作用域的指令控制器时,指令的链接函数需要什么?

    我需要对范围和模板执行一些操作 看来我可以在以下任何一个中做到这一点link函数或controller函数 因为两者都可以访问该范围 什么时候我必须使用link功能而不是控制器 angular module myApp directive
  • Yeoman-Angular 生成的应用程序中缺少 Angular 脚本

    我已经使用 Yeoman Angular Generator 生成了一个应用程序 但项目中缺少 angular js 和其他 Angular 文件 我可以在 Bower json 文件中看到这些依赖项 如下所示 name mi portfo
  • angularjs 自定义过滤器检查数据数组内的值

    我有两个过滤器 它们根据数据中的队列键过滤数据 这是我的代码 var app angular module app app controller mainController function scope Data object scope
  • 错误:[ngModel:datefmt] 预期 `2015-05-29T19:06:16.693209Z` 为日期 - Angular

    我正在尝试angular申请与Django with rest framework 该应用程序从服务器接收 json 信息 关键之一是created time 该字段的值的格式根据iso 8601 例如2015 05 29T19 06 16
  • 在带有融合图表的饼图中显示图例

    我想在饼图中显示图例及其值 我用谷歌搜索了很多 但没有得到任何解决方案 此外 融合图表中没有选项可以直接实现这一点 谁能建议我可以应用什么技巧来做到这一点 我想我需要修改库中的很多我不想要的东西 所以请帮助我 Refer below ima
  • 粘性页脚不粘在 AngularJS 中

    Im working an angular site and im trying to implement a sticky footer across all views but the footer stops sticking whe
  • 如何更改 AngularJS HTTP 调用的基本 URL?

    我的应用程序多次调用 HTTP 如下所示 this http method this method url this url this url 始终设置为 app getdata 之类的内容 现在我已将应用程序的后端移至另一台服务器 我将需
  • 角度斜线被编码

    我和这个人有同样的问题 angularjs slash after hashbang gets encoded https stackoverflow com questions 17530924 angularjs slash after
  • 未找到角度映射文件

    我刚刚下载了 angular min js 的新副本 并且在 angular min js map 上收到了 404 但我没有将其包含在我的代码中 Chrome 中的错误 GET http angular dev js angular mi
  • EJS.JS ReferenceError:标题未定义

    我遇到了 Express 脚本的问题 我正在调用一个在另一个函数成功时呈现视图的函数 在这个项目中 我使用 Angular Node Express 和 ejs 作为视图引擎 当我渲染视图时 不幸的是我收到以下 ejs 错误 Referen
  • 尝试为每一行编写测试用例

    已经编写了跳跃方法的测试用例 但当我看到代码覆盖率报告时 它不会进入onloadend方法seat onloadend 在 createSpyObj 中我调用了 loadend 但它仍然没有进入内部 你们能告诉我如何解决它吗 下面提供我的代
  • 异步加载 Angular 指令模板

    我希望能够从加载指令的模板promise e g template templateRepo get myTemplate templateRepo get返回一个承诺 当解析时 模板的内容将包含在字符串中 有任何想法吗 您可以在指令中加载
  • 量角器检查元素是否不存在

    我在基于角度的网站中有一个设置可以打开和关闭下拉菜单 如果关闭 则不会显示在主页上 对于量角器 我需要检查开关关闭时该元素是否不存在 但是 我不应该陷入 未找到元素 错误 因为它是一组许多测试中的一个 我该怎么做 我曾尝试这样做 expec
  • 容器中的等间距 div

    这是我的例子 http jsfiddle net rtCP3 62 http jsfiddle net rtCP3 62 我有 3 个 或更多 div 我想在一个容器中均匀分布 当将 Angular 与 ng repeat 一起使用时 样式
  • AngularJS 1.4 中的一种绑定方式

    根据探索 Angular 1 3 一次性绑定 http blog thoughtram io angularjs 2014 10 14 exploring angular 1 3 one time bindings html 使用新语法就像
  • 清除 Angular 表单提交中的输入字段?

    我认为 setPristine 应该执行此操作 但它不在我的项目中 这是我的表格 form name new project ng submit create project div create wrapper input project
  • Angular JS - 如何验证数字输入中的位数

    我们想要做的是 有一个仅接受 0 24 的输入 对于时间输入应用程序 这些是用户应该能够输入到输入中的值 0 1 2 3 4 5 6 7 8 9 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
  • 自定义过滤器在 Angular Hybrid 应用程序中不起作用

    我正在尝试将 AngularJS 1 6 应用程序与 Angular 5 一起转换为混合应用程序 我定义了以下简单过滤器 function use strict var filterId colorPicker angular module
  • 带有 R 传单的自定义图例 - 同一图例中的圆形和正方形

    我想创建一个传单地图 在同一个传单图图例中既有圆形又有正方形 到目前为止 我已经使用了上一篇文章中的建议 并在我闪亮的 UI 代码中添加了以下代码 tags style type text css html body width 100 h

随机推荐