代码之家 › 专栏 › 技术社区 › Alex Beugnet

传单:层组弹出窗口不能修改宽度/高度

leaflet angular

0

Alex Beugnet · 技术社区 · 8 年前

Marker 已在另一个中定义 LayerGroup . 这些 Popups 然后通过传单进行控制 LayerControl ,同时显示/隐藏所有附加弹出窗口。

减少这些弹出窗口的大小,因为它们包含的信息很少,所以它们相当大。

下面是我使用函数将弹出窗口添加到另一个窗口的尝试 图层组 ,并使用传单 PopupOptions : maxWidth 和 maxHeight ,但它根本不起作用。

如果我直接将新的弹出窗口添加到地图中,它会正常工作 我需要能够控制 图层组 从 图层控制 . 我必须通过CSS使用黑客来实现我的目标吗?我现有的代码不是有一个简单的解决方案吗?

层。形态.ts

  const markers: L.Marker[] = GlobalMapService.jsonToArray(globalMapService.markersLayer.getLayers());
  const labelsLayer = L.layerGroup(null); // LayerGroup containing my Popups

  markers.forEach((marker, index) => {
    L.popup({
      offset: [2, -25],   // This works (needed for Angular integration).
      closeButton: false, // This works (as you can see).
      maxWidth: 30,       // This doesn't work at all with a LayerGroup.
      maxHeight: 25       // Same as above.
    })
      .setLatLng(marker.getLatLng())
      .setContent('ID : ' + (index + 1))
      .addTo(labelsLayer);
  });

  return labelsLayer;

层。形态.ts

  const overlays: L.Control.LayersObject = {
    'Labels': labelsLayer
  };
  globalMapService.overlays = overlays;

传单映射组件。输电系统

  const map = L.map(this.mapEl.nativeElement, {
    center: [51.505, -0.09],
    zoom: 7,
    layers: [
      this.leafletService.baseLayers['Standard'], // BaseLayer
    ]
  });

  L.control.layers(this.leafletService.baseLayers, this.globalMapService.overlays)
  .addTo(map);

1 回复 | 直到 8 年前

1

Baptiste 8 年前

您可以做的是将自定义css类添加到弹出菜单中:

markers.forEach((marker, index) => {
    L.popup({
        className: 'small-popup',
        offset: [2, -25],
        closeButton: false
    })
    .setLatLng(marker.getLatLng())
    .setContent('<div class="popup">ID : ' + (index + 1) + '</div>')
    .addTo(labelsLayer);
});

我添加了一个 div 在弹出窗口中,您不需要它,但也可以进行更多控制 inside 您的弹出窗口。

然后添加此css:

.small-popup {
    max-width: 30px;
    max-height: 25px;
}

这就是我所做的,对我来说,这是一个很好的解决方案,因为你可以很容易地编辑你的css后。