Angular-leaflet-directive 自定义 HTML 弹出窗口答案

【问题标题】：Angular-leaflet-directive Custom HTML popupAngular-leaflet-directive 自定义 HTML 弹出窗口
【发布时间】：2015-07-15 23:25:01
【问题描述】：

我正在尝试在使用 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();
});

但这似乎没有任何作用。非常感谢任何帮助！

【问题讨论】：

标签： javascript angularjs popup leaflet angular-leaflet-directive

【解决方案1】：

您需要使用“leafletEvent”。试试这个：

myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {

    // after all your crazy custom popup stuff ...
    leafletData.getMap().then(function(map) {
        layer.getPopup().update();
    });
}]);

【讨论】：

【解决方案2】：

我最终将图像宽度存储在 GeoJson 的属性中，然后在 bindPopup 函数中将 minWidth 设置为该值。

layer.bindPopup(popupContent,{
  closeButton: true,
  closeOnClick: false,
  minWidth: feature.properties.width,
  autoPanPadding: L.point(20,20),
  keepInView: false,
  feature: feature
});

【讨论】：