我正在尝试在使用 angular-leaflet-directive 时创建自定义弹出窗口。我正在从 leaflet.draw on:create 事件打开弹出窗口。这里:
map.on('draw:created', function(e) {
layer = e.layer;
drawnItems.addLayer(layer);
var newComment = "Enter Comment";
var newID = "ID";
var newGeoJsonFeat = layer.toGeoJSON();
newGeoJsonFeat.properties = {"comment":newComment, "id":newID};
console.log(newGeoJsonFeat);
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
});
然后我使用@blackjid 的逻辑,如下所示: https ://github.com/tombatossals/angular-leaflet-directive/issues/238 绑定自定义弹出窗口
function onEachFeature(feature, layer) {
// Create get the view template
var popupContent = '<div ng-include="\'partials/popup_newfeat.html\'"></div>';
console.log("assigning popup");
// Bind the popup
// HACK: I have added the stream in the popup options
layer.bindPopup(popupContent,{
closeButton: false,
maxHeight: 300,
feature: feature
});
};
$scope.$on('leafletDirectiveMap.popupopen', function(event, leafletEvent){
// Create the popup view when is opened
var feature = leafletEvent.leafletEvent.popup.options.feature;
var newScope = $scope.$new();
newScope.stream = feature;
$compile(leafletEvent.leafletEvent.popup._contentNode)(newScope);
});
长话短说,除了弹出容器没有正确调整大小以适应新内容外,一切正常。高度似乎是正确的,但宽度是关闭的。
我尝试使用:
.leaflet-popup-content {
width:auto !important;
}
这可能就足够了,但这会导致弹出锚点出于某种原因移动到弹出窗口的左下方。在地图顶部附近单击时,AutoPan 也会损坏。
有谁知道我可以在哪里以及如何让 popup.update() 触发?我相信这就是需要发生的事情,但我不知道在哪里实施。我试过在 layer.openPopup() 之后调用它,如下所示:
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
layer.getPopup().update();
});
但这似乎没有任何作用。任何帮助是极大的赞赏!