AngularJS Leaflet getMap()不起作用

时间:2014-07-22 15:24:34

标签: angularjs leaflet angular-leaflet-directive

将Leaflet添加到我的AngularJS应用程序后:

<leaflet id="map" defaults="defaults" center="center" bounds="bounds" controls="controls" event-broadcast="events"></leaflet>

并进行设置:

// Initialise the feature group to store editable layers
var drawnItems = new L.FeatureGroup();

// Initialise the draw control
var drawControl = new L.Control.Draw({
    position: 'topright',
    edit: {
        featureGroup: drawnItems
    }
});

// Configure Leaflet
angular.extend($scope, {
    defaults: {
        zoomControlPosition: 'topright',
        minZoom: 3,
        tileLayerOptions: {
            detectRetina: true,
            reuseTiles: true,
            attribution: '<a href="http://osm.org">OpenStreetMaps</a>'
        }
    },
    center: {},
    controls: {
        custom: [drawControl]
    },
    events: {
        map: {
            enable: ['click']
        }
    }
});

遵循此代码后,它不会被评估(尽管没有显示错误):

leafletData.getMap().then(
    function (map) {
        alert('I have accessed the map.');
    }
);

这应该会立即向我显示警告,但没有任何反应。

如果我延迟以前的代码,例如,在点击按钮的功能中运行它,它就可以了!

有谁知道可能会出现什么问题?

看到示例,它应该有效:https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/control-draw-example.html

已部分解决

leaflet HTML标记中删除ID解决了这个问题。一定是个bug。

1 个答案:

答案 0 :(得分:18)

您应该将id标记中指定的<leaflet>传递给getMap()函数。

在您的示例中,ID为map。你会这样传递它:

leafletData.getMap("map").then(
    function (map) {
        alert('I have accessed the map.');
    }
);