单击传单标记时如何在弹出窗口上显示图像和链接？答案

【问题标题】：How to show an image and a link on a popup when clicking on a leaflet marker?单击传单标记时如何在弹出窗口上显示图像和链接？
【发布时间】：2021-03-10 20:57:32
【问题描述】：

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

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"
    });
}

我还想在弹出窗口中显示指向图像的链接，以便在单击时可以在浏览器的新选项卡上以全尺寸显示。最好是链接编辑或其他东西，这样它就不会在屏幕上占用太多空间。

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

像下面这样更改popupContent，以便灵活更改弹出内容如何？（该链接应该在您的环境中有效。）

另外，我认为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>

【讨论】：