单击 leaflet 标记时，如何在弹出窗口上显示图像和链接？
[英]How to show an image and a link on a popup when clicking on a leaflet marker?
问题描述
Currently, I have this code to show an image on a popup when clicking on the marker:
目前，我有这段代码可以在单击标记时在弹出窗口上显示图像：
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"
});
}
I want to also show a link to the image on the popup, so that when clicked, it can be displayed full size on a new tab on the browser.我还想在弹出窗口中显示指向图像的链接，以便在单击时可以在浏览器的新选项卡上以全尺寸显示。 Preferable the link is edited or something, so that it does not take much space on the screen.最好是链接被编辑或其他东西，这样它就不会在屏幕上占用太多空间。
1 个解决方案
解决方案1
1 已采纳 2021-03-10 22:32:42
How about changing the popupContent like below so that you can change the popup content flexibly?像下面这样更改popupContent怎么样，以便您可以灵活地更改弹出内容？ (The link should work in your environment.) （该链接应该在您的环境中有效。）
Also, I think onClick function is not necessary.另外，我认为onClick function 是没有必要的。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.