如何自定义传单弹出窗口以包含图像缩略图和其他自定义内容？

Question

我四处搜索，但 none 的解决方案似乎有效。当数据进入我的传单地图上的弹出窗口时，我正在尝试动态添加标题、图像、地址和名称，但没有任何进展。

这是我的打字稿代码：

refresh() {
  this.artworkService.retrieveAll().then((artworkList) => {
    this.artworkList = artworkList;
    for (let artwork of this.artworkList) {
      var popupInfo = "<span class='test'>" + artwork.name + "</span>" + "<br/>" + artwork.filename;
      console.log(artwork.name);
      L.marker([artwork.latitude, artwork.longitude], this.markerIcon).addTo(this.map)
      .bindPopup(popupInfo);
    }
  });
}

在这里，我尝试将标题包裹在一个范围内，并希望向其中添加一些 css 但什么也没做！任何提示将不胜感激！

Answer 1

很可能标记未呈现，因为您以错误的方式声明了 markerIcon。例如：

markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      // specify the path here
      iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
      shadowUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png"
    })
};

其次，要在弹出窗口上应用自定义 css，您需要在 bindPopup 方法中提供 popupOptions 或实例化一个 L.popup 并附加一个类名。还要检查 here。第一种方式是：

const popupOptions = {
  className: "test"
};
for (let artwork of this.artworkList) {
  const popupInfo =
    "<span class=''>" +
    artwork.name +
    "</span>" +
    "<br/>" +
    artwork.filename;
  console.log(artwork.name);
  L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
    .addTo(this.map)
    .bindPopup(popupInfo, popupOptions);
}

然后在全局中包含样式style.css

例如：

.test .leaflet-popup-content-wrapper {
      background: #2ce897;
      color: #eee;
      font-weight: bold;
      font-size: 12px;
      line-height: 24px;
      border-radius: 0px;
}

这里有一个 demo，其中包含您的用户案例示例。

如何自定义传单弹出窗口以包含图像缩略图和其他自定义内容？

How to customize leaflet popup to include image thumbnails and other customization?

popup

leaflet

typescript

angular