如何将图像和文本添加到传单地图的弹出窗口中

Question

我想将图像和文本添加到传单地图的弹出窗口，例如此链接：

https://www.bookdepository.com/

我可以添加图像但如何在图像附近添加文字？我的代码在这里：

  <div id="map" style="width:270px;height:310px;"></div>
     <?php
       $matrix = [
          [34.05777800, 51.48416700],
          [38.50972200, 46.65444400],
          [29.26666700, 51.21666700],
          [34.05777800, 51.48416700],]
      ?>
      <script type="text/javascript">
         var matrix = JSON.parse('<?php echo json_encode($matrix);?>');
         var map = L.map('map').setView(matrix[0],7);
         var i = 1;
         function myLoop() {
            setTimeout(function () {
            var div = L.DomUtil.create('div', 'my-div');
            var img = L.DomUtil.create('img', 'my-img',div);
            img.style.width = '60px';
            img.style.height = '80px';
            div.style.textAlign = 'right';
            img.src = 'http://127.0.0.1:8000/productImages/64517.jpg';
            L.marker(matrix[i]).addTo(map)
               .bindPopup(div)
               .openPopup();
            map.flyTo(matrix[i]);
            i++;
            if (i < 10) {
             myLoop();
             }
            }, 6000)
             }
             L.tileLayer('https://stamen-tiles 
              {s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
              ext: 'jpg'
              }).addTo(map);
             myLoop();
         </script>

我的输出是这张照片：

Answer 1

您可以使用leaflet的bindpopup函数附加弹出的自定义html。

marker.bindPopup("<div>Your custom html</div>");

你可以找到更多信息here。