Question

我有一个AngularJS应用程序，我目前正在尝试访问＆＃34; search_expanded＆＃34; Leaflet Search控制但没有运气的事件。

这是我的代码：

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

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 2

首先，我会尝试在那里抛出一些异常处理：

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 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控件事件

3 个答案: