如何使用PHP和Javascript将MySQL中的数据显示到标记上的传单弹出窗口中？

Question

Ok, this is my first time asking a question here. Please don't bully me.

This has been asked before and I tried to solve it myself, yet it just won't work.

Here is my problem: As stated in the question, I can't seem to call the data from MySQL into the marker's popup.

I tried to use <code>json_encode</code> to print it in the Javascript popup.The result is either show [object] [object] in the popup, or the leaflet map won't load at all. If I remove the <code>marker.bindPopup()</code>, the code works fine.

Here is the code :

<div id="map" style="width: 800px; height: 500px;"></div>

              <?php
                  $result = mysqli_query($konek,"SELECT dep,mag FROM data_gempa_jawa");
                  $rows = array();
                  while($r = mysqli_fetch_assoc($result)) {
                      $rows[] = $r;
                  }
              ?>

              <!-- This is for the leaflet maps -->
              <script type="text/javascript">

                <?php include "planelatlong.php"; ?>

                var tiles = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                  maxZoom: 18,
                  attribution: '&copy; <a href="//openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
                });

                var map = L.map('map', {
                  center: L.latLng(-6.6, 106.42),
                  zoom: 5,
                  layers: [tiles]
                });

                var mcg = L.markerClusterGroup({
                  chunkedLoading: true,
                  //singleMarkerMode: true,
                  spiderfyOnMaxZoom: true
                });

                for (var i = 0; i < planelatlong.length; i++) {
                  marker = new L.marker([planelatlong[i][1],planelatlong[i][2]]);
                  marker.bindPopup("<?php print json_encode($rows); ?>");
                  mcg.addLayer(marker);
                  marker.on('click', onClick);
                }
                  function onClick(e) {
                    var popup = e.target.getPopup();
                    var content = popup.getContent();
                  }
                map.addLayer(mcg);

              </script>

Here is the "planelatlon.php" code :

<?php
    include "koneksi.php";
    $select = mysqli_query($konek,"SELECT id,lat,lon FROM data_gempa_jawa");

    if ( ! $select ) {
        echo mysqli_error();
        die;
    }

    $data = array();

    echo "var planelatlong = [";

    for ($x = 0; $x < mysqli_num_rows($select); $x++) {
        $data[] = mysqli_fetch_assoc($select);
        echo "[",$data[$x]['id'],",",$data[$x]['lat'],",",$data[$x]['lon'],"]";
        if ($x <= (mysqli_num_rows($select)-2) ) {
            echo ",";
        }
    }
        echo "];";

    mysqli_close($konek);
?>

Thanks a lot!

Answer 1

You can generate a geojson file from php and then process it like any other from leaflet.

onEachFeature: function(feature, layer) {
        layer._leaflet_id = feature.properties.control;

        var popupText = feature.properties.description 
            layer.bindPopup(popupText)
            layer.bindTooltip(feature.properties.title).openTooltip(); 
            }
            });