单击传单标记时如何在弹出窗口中显示图像和 link？

Question

目前，我有这段代码可以在单击标记时在弹出窗口中显示图像：

const marker3 = L.marker([22.78257, -94.5612], {icon: redIcon}).on('click', onClick2).addTo(map);

// When click on red marker, open popup with the image
function onClick2(e) {
    popupContent = document.createElement("img");
    popupContent.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Stack_Exchange_logo_and_wordmark.svg/375px-Stack_Exchange_logo_and_wordmark.svg.png";
    marker3.bindPopup(popupContent, {
        maxWidth: "auto"
    });
}

我还想在弹出窗口中为图像显示 link，以便在单击时可以在浏览器的新选项卡上以全尺寸显示。最好编辑 link 之类的东西，这样就不会在屏幕上占用太多 space。

Answer 1

不如把popupContent改成下面的样子，这样就可以灵活的改变弹窗内容了？（link 应该适用于您的环境。）

另外，我认为onClick功能是没有必要的。

const src = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Stack_Exchange_logo_and_wordmark.svg/375px-Stack_Exchange_logo_and_wordmark.svg.png";
const popupContent = document.createElement("div")
popupContent.innerHTML = "<img src='" + src + "'>"
                       + "<a target='_blank' href='" + src + "'>See the image</a>"

const map = L.map('map').setView([10, 20]);
const marker = L.marker([10, 20]).bindPopup(
    popupContent,
    { maxWidth: "auto" }
).addTo(map);

#map {
    height: 360px;
}

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
</head>
<body>
    <div id="map"></div>
</body>

单击传单标记时如何在弹出窗口中显示图像和 link？

How to show an image and a link on a popup when clicking on a leaflet marker?

javascript

leaflet