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

您可以使用传单的bindpopup功能将弹出式窗口附加到您的自定义html。

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

您可以找到更多信息 here 。

Answer 2

您确实可以像这样使用 .bindPopup 方法（在您的情况下）：

matrix
.bindPopup("<div> <p>Text</p> <img src="path/or/url"/> </div>");

尽管如此，在 <span> 标记中使用 css background-image 作为弹出图像不能正常工作，但我建议使用 <img> 标记。 >

希望对您有所帮助，您可以找到有关方法 there 的更多信息。

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

2 个答案: