将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.');
}
);
这应该会立即向我显示警告,但没有任何反应。
如果我延迟以前的代码,例如,在点击按钮的功能中运行它,它就可以了!
有谁知道可能会出现什么问题?
从leaflet
HTML标记中删除ID解决了这个问题。一定是个bug。
答案 0 :(得分:18)
您应该将id
标记中指定的<leaflet>
传递给getMap()函数。
在您的示例中,ID为map
。你会这样传递它:
leafletData.getMap("map").then(
function (map) {
alert('I have accessed the map.');
}
);