Using popups with ngx-leaflet

问题

I'd like to make a more involved popup with ngx-leaflet that can make use of Angular directives and generally be treated as any other Angular component. Is there a good way to do this?

You can create a popup using L.popup and setContent however this requires a raw html string.

回答1:

I've been using ngx-leaflet i.c.w. angular material. You can show a dialog by clicking on a marker like so:

marker([geo.latitude, geo.longitude], {
      icon: icon({
        iconSize: [25, 41],
        iconAnchor: [13, 41],
        iconUrl: `assets/marker-icon.png`,
        shadowUrl: 'assets/marker-shadow.png'
      })
    })
  .on('click', this.showPopup.bind(this))

And then on your component the showPopup does:

showPopup(): void {
  const infoDialogRef = this.dialog.open(InfoDialogComponent, {
      width: '250px',
  });
}

来源：https://stackoverflow.com/questions/49631467/using-popups-with-ngx-leaflet