将传单弹出窗口调整为角度传单中的表格大小

Question

我在 Leaflet 地图上有一个图层弹出窗口，当您单击地图上的某个点时会出现一个弹出窗口。弹出窗口应显示包含该特定图层数据的表格。但是，弹出窗口不会调整到表格大小：

但是当我去掉 leaflet-popup-content 的默认宽度时，弹出窗口不会出现在该点的正上方，而是向右移动：

我显示弹出窗口的方式如下（在我的弹出窗口服务中）：

let popupOptions = {
   className: "popup",
   maxWidth: 250 // This doesn't do anything for some reason
};

L.popup(popupOptions)
   .setLatLng(latLng)
   .setContent(this.compilePopup(PopupComponent))
   .openOn(map);

您可以看到我将 PopupComponent 注入到 Leaflet 弹出窗口中，而不仅仅是对 html 进行硬编码。 this.compile 函数如下所示：

private compilePopup(component: any) {
    const compFactory: any = this.resolver.resolveComponentFactory(component);
    let compRef: any = compFactory.create(this.injector);

    this.appRef.attachView(compRef.hostView);
    compRef.onDestroy(() => this.appRef.detachView(compRef.hostView));

    let div = document.createElement('div');
    div.appendChild(compRef.location.nativeElement);
    return div;

这就是我的 PopupComponent HTML 的样子：

<ng-template>
    <table class="table table-striped table-bordered table-condensed table-hover">
        <tr>
            <th *ngFor="let col of columns;">
                {{columns}}
            </th>
        </tr>
        <tr>
            <td *ngFor="let col of columns;">
                {{columnDetails[columns]}}
            </td>
        </tr>
    </table>
</ng-template>

弹出组件.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {
  columnDetails: any;
  columns: Array<string> = ["Column 1", "Column 2", "Column 3"];


  constructor(
    private popupService: PopupService,
    private popupStore: PopupStore
  ) {
    this.columnDetails= this.popupService.columnDetails;

  }
}

我初始化传单地图的方式是在我的 map-component.ts 中：

  options: MapOptions = {
    center: latLng(47.5786262, -122.1654623),
    minZoom: 4,
    layers: [
      L.gridLayer.googleMutant({
        type: 'roadmap', // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
        styles: [
          {
            featureType: "poi.business",
            elementType: "labels",
            stylers:
              [
                {
                  visibility: "simplified"
                }
              ]
          }
        ]
      }),
    ],
    zoom: 5,
    zoomControl: false
  };

地图组件.html：

<div id="map"
    leaflet [leafletOptions]="options"
    (leafletMapReady)="onMapReady($event)"
    (leafletMapMove)="onMapMove($event)"
    (leafletMapZoom)="onMapZoom($event)"
    (leafletClick)="onMapClick($event)">
</div>

现在我发现exact same problem as mine 的另一个问题，看到您可以设置maxWidth: "auto" 或使用update()，但这两种解决方案对我不起作用，因为它专门用于Leaflet javascript，我正在使用ngx -传单，角传单。

我怎样才能让弹出窗口调整到我的表格大小并且弹出窗口就在我点击的标记上方？或者有没有办法将其他解决方案翻译成我的代码？非常感谢任何帮助！

Answer 1

您可以预先计算列的总宽度，然后将该值用作minWidth 的popupOptions：

const columnsWidth: number = columns.length * 80 // assuming each column width is 80px

const popupOptions = {
   className: "popup",
   minWidth: columnsWidth // use the calculated width
   ...
};

L.popup(popupOptions)

为此，您应该为列分配固定宽度（此处使用内联样式仅用于示例目的）：

<table>
    ...
    <td *ngFor="let col of columns" style="width: 80px">
        {{columnDetails[columns]}}
    </td>
    ...
</table>

它将使 Leaflet 能够正确呈现弹出布局并在地图上正确定位图钉。

参考：Leaflet documentation