javascript - 如何将图像附加到地图标记信息窗口（传单）中包含的 div

Question

我有一个从数据库中获取 src 的图像列表。对于列表中的每一个，它都会创建一个图像并将其附加到一个 div 中。但是，我的 div 用一个字符串表示，该字符串的代码应该出现在我拥有的每个标记上，我认为这就是问题所在。有没有办法解决这个问题？这是我到目前为止所拥有的：

 $.each(data, function (i, item) {

            var aux

            item.listaOcorrencias.forEach(function (ocorrencia, o) {

                aux = ocorrencia.fotografia;

                $(aux).each(function () {

                    $('#myDiv').append('<img src="imagensFogos/' + this.fotografia + '" onclick="openModal();currentSlide(1)" class="hover-shadow" style="width:70px; height:60px" hspace="4"/>')
                });


                //Here is the infowindow that contains myDiv

                var infowindow = '<div id="content" style="hight:700px; width:500px">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<div id="bodyContent">' +
                    '<p><b>Avaliação da Ocorrência:</b></p>' +
                    //Here is where the images should be appended
                    '<div id="myDiv" class="flex-parent" style="display:flex}"> </div>'


                    '<div class="button-holder">' +
                    '<a href="#slider-image-1" class="slider-change"></a>' +
                    '<a href="#slider-image-2" class="slider-change"></a>' +
                    '<a href="#slider-image-3" class="slider-change"></a>' +
                    '</div>' +
                    '</div> ' +
                    '<p id="estadoP"> Estado: ' + item.estado + '</p>' +
                    '<button id="aceite" onclick="aceite()" style="background-color:#4CAF50;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); margin:5px;">Aceitar</button>' +
                    '<button id="recusado" onclick="recusado()" style="background-color:#f44336;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin:5px;" >Recusar</button>' +
                    '<button id="concluido" onclick="concluido()" style="background-color:#008CBA;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin:5px;" > Concluído</button>' +
                    '</div>';

                //definição do icon para o marcador
                var ignicao;

                var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })
                    .bindPopup(infowindow)
                    .on('click', onClick)
                    .addTo(map);


           //adds marker to map

                $('#json map').append(marker);


            });


        }); 
    }); 

标签： javascriptjqueryleaflet