2

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();
});

しかし、それは何もしないようです。どんな助けでも大歓迎です！

4

2 に答える 2

0

GeoJson のプロパティに画像の幅を保存し、bindPopup 関数で minWidth をその値に設定しました。

layer.bindPopup(popupContent,{
  closeButton: true,
  closeOnClick: false,
  minWidth: feature.properties.width,
  autoPanPadding: L.point(20,20),
  keepInView: false,
  feature: feature
});
于 2015-09-08T14:18:22.503 に答える