Javascript 传单-自定义弹出窗口的弹出窗口获取内容_Javascript_Html_Popup_Leaflet

Javascript 传单-自定义弹出窗口的弹出窗口获取内容

javascript html leaflet

Javascript 传单-自定义弹出窗口的弹出窗口获取内容,javascript,html,popup,leaflet,Javascript,Html,Popup,Leaflet,在传单中，我创建了一个具有以下HTML主体结构的简单地图： <body> <h1>Leaflet webmap</h1> <div class="map" id="mainMap" role="main" tabindex="0"></div>  <div id="modal-box" class="moda

在传单中，我创建了一个具有以下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>

。。。。对于每一点，我都创建并剪切了一个带有文本和图片的弹出窗口。以下是我的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);
}

var popupOptions={
maxWidth:'400'，
宽度：“200”，
类名：“custom-popup2”
};
对于（var i=0；i
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 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;
    }
}