Question

在Leaflet中，我创建了一个包含此HTML主体结构的简单地图：

<body>
    <h1>Leaflet webmap</h1>
    <div class="map" id="mainMap" role="main" tabindex="0"></div>
    <!-- modal-box to display full image -->
    <div id="modal-box" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modal-img" alt="Picture"/>
        <div id="modal-caption"></div>
    </div>
    <script src="../JS/fileJS.js" type="text/javascript"></script>
</body>

我在地图中添加了一系列像这样的点：

var fontane = [
    ["Fontana1",45.38722539,10.48994631,"../fontane/Fontana1.jpg"],
    ["Fontana2,45.39481876,10.4869347,"../fontane/Fontana1.jpg"]
];

.... 并且，对于每个点，我创建了一个带有一些文本和图片的弹出窗口。这是我的js代码：

var popupOptions = {
    maxWidth: '400',
    width: '200',
    className : 'custom-popup2'
    };
for (var i=0; i<fontane.length; i++) {
    var lat = fontane[i][1];
    var lon = fontane[i][2];
    var popupTitle = fontane[i][0];
    var popupImgPath = fontane[i][3];
    var popupText = "<h1>"+popupTitle+"</h1><br/><a href='http://www.website.fff/'>"+popupTitle+"</a><br/><br/><img class='img-popup' src="+popupImgPath+" alt='photo' style='width:150px'>";
    var popupBaloon = L.popup(popupOptions)
        .setContent(popupText);
    var fontanaLoc = new L.latLng(lat, lon);
    var fontana = new L.Marker(fontanaLoc, {icon: iconaFontana});
    mainMap.addLayer(fontana);
    fontana.bindPopup(popupBaloon);
}

此代码有效。现在我想点击弹出窗口中的图片并在新的模态窗口中打开它。我正在尝试使用应用于弹出窗口的'getContent'方法来检索代表图像的html元素，但没有成功。我无法理解什么是正确的语法，我的错误是什么。这是完整的，无法正常运行的代码。

var popupOptions = {
    maxWidth: '400',
    width: '200',
    className : 'custom-popup2'
    };
for (var i=0; i<fontane.length; i++) {
    var lat = fontane[i][1];
    var lon = fontane[i][2];
    var popupTitle = fontane[i][0];
    var popupImgPath = fontane[i][3];
    var popupText = "<h1>"+popupTitle+"</h1><br/><a href='http://www.website.fff/'>"+popupTitle+"</a><br/><br/><img class='img-popup' src="+popupImgPath+" alt='photo' style='width:150px'>";
    var popupBaloon = L.popup(popupOptions)
        .setContent(popupText);
    var fontanaLoc = new L.latLng(lat, lon);
    var fontana = new L.Marker(fontanaLoc, {icon: iconaFontana});
    mainMap.addLayer(fontana);
    fontana.bindPopup(popupBaloon);
    var modalBox = document.getElementById('modal-box');
    var modalImg = document.getElementById('modal-img');
    var modalCaption = document.getElementById('modal-caption');
    var popupImg2Mod = popupBaloon.getContent('img.img-popup');
    popupImg2Mod.onclick = function(){
        modalBox.style.display = "block";
        modalImg.src = popupImgPath.src;
        modalCaption.innerHTML = popupTitle;
    }
}

提前谢谢你，MZ

Leaflet - 用于自定义弹出式窗口的弹出式getContent

0 个答案: