Angular Leaflet Search控件事件

Question

我有一个 AngularJS 应用程序，我目前正在尝试访问 Leaflet Search 控件的 "search_expanded" 事件，但没有成功。

这是我的代码：

angular.module('myApp', [ 'leaflet-directive' ])
       .controller('ShowMapCtrl', ["$scope", "leafletData", function ($scope, leafletData) {
       // some code
            leafletData.getMap().then(function(map) {
                       map.on('search_expanded', function(e){
                            alert("search control expannded"); 
                       });
                   });

Answer 1

首先我会尝试在其中抛出一些异常处理：

leafletData.getMap().then(function(map) {
    map.on('search_expanded', function(e){
        alert("search control expannded"); 
    }, function(reason) {
        alert('Failed: ' + reason);
});

此外，我更喜欢使用 console.log() 而不是警报，尤其是在 Angular 应用程序中。

leafletData.getMap().then(function(map) {
    map.on('search_expanded', function(e){
        console.log("search control expannded"); 
    }, function(reason) {
        console.log('Failed: ' + reason);
});

Answer 2

search_expanded 事件以及 L.Control.Search 支持的所有其他事件在实际控件实例上触发，而不是在地图实例上触发，如下例所示：

var controlSearch = new L.Control.Search({
    layer: new L.LayerGroup()
}).on('search_expanded', function () {
    console.log('search_expanded!')
}).addTo(map);

http://plnkr.co/edit/njeXYb4PfbaG3hppcgmO?p=preview

Answer 3

我想出了一个草率的解决方法，因为该指令不允许我捕获搜索控件事件。

var expanded = false;

$scope.$on('leafletDirectiveMap.layeradd', function(){

    $('input.search-input').focus(function(){

        expanded = !expanded;

        if(expanded)
        {
            console.log("search control expanded");
        }

    });
});

Angular Leaflet Search控件事件

Angular Leaflet Search control event

angularjs

leaflet

angular-leaflet-directive