javascript 点击瓣叶标记时，如何在弹出窗口中显示图像和链接？

xghobddn 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(101)

目前，我有这样的代码，当点击标记时，在弹出窗口中显示一个图像：

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

来源：https://stackoverflow.com/questions/66572730/how-to-show-an-image-and-a-link-on-a-popup-when-clicking-on-a-leaflet-marker

2条答案

按热度按时间

xtfmy6hx1#

像下面这样改变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>

赞(0）回复(0）举报 2023-04-28

p4tfgftt2#

在这里a jsFiddle demo为您，点击蓝色标记，以显示一个可点击的图像弹出：

JavaScript代码非常简单：

首先，将弹出窗口的HTML内容放入popupContent字符串
然后使用OpenStreetMap切片创建Map
最后，你创建一个标记与popup，并将其附加到Map

'use strict';

var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Stack_Exchange_logo_and_wordmark.svg/375px-Stack_Exchange_logo_and_wordmark.svg.png';
var popupContent = 'Click the image to display it in full size:<br>' +
                    '<a href="' + imageUrl + '" target="_blank"><img src="' + imageUrl + '"></a>';

var startPosition = [51.4661, 7.2491];
var map = L.map('map').setView(startPosition, 14);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker(startPosition)
  .bindPopup(popupContent)
  .addTo(map);

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#map {
  flex-grow: 1;
}

a > img {
  border: 4px dashed blue;  
  max-height: 80px;
  max-width: 100px;
  padding: 4px;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

<div id="map"></div>

请注意，打开新的浏览器选项卡可能会在Stackoverflow中被阻止。..

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 点击瓣叶标记时，如何在弹出窗口中显示图像和链接？

2条答案

相关问题

热门标签

最新问答