简体   繁体   中英

How add image and text to popup of leaflet map

I want to add image and text to popup of leaflet map such as this link:

https://www.bookdepository.com/

I can add image But How I can add text near the image? my code is here:

  <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>

My output is this pic: 在此处输入图像描述

You can use bindpopup function of leaflet to attach a pop up with your custom html.

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

You can find more information here .

You can indeed use the .bindPopup method like this (in your case):

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

Nevertheless it seems that using the css background-image in a <span> tag as popup image doesn't work correctly , I recommend using an <img> tag.

Hope it's helpful, you can find more information on methods there .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM