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

Question

好的，这是我第一次在这里提问。请不要欺负我。

这个问题之前已经被问过，我尝试自己解决它，但它就是行不通。

这是我的问题:正如问题中所述，我似乎无法将 MySQL 中的数据调用到标记的弹出窗口中。

我尝试使用<code>json_encode</code>在 Javascript 弹出窗口中打印它。结果是 show [object] [object]在弹出窗口中，否则传单 map 根本不会加载。如果我删除 <code>marker.bindPopup()</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>

这是“planelatlon.php”代码:

<?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);
?>

非常感谢!

Answer 1

您可以从 php 生成一个 geojson 文件，然后像传单中的任何其他文件一样处理它。

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

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