PHP与JavaScript循环在LeafLet生成标记仅显示一个的问题求助

问题根源 #

你的代码混淆了服务器端PHP执行顺序和客户端JS执行顺序：

• PHP在服务器端先运行，只会读取一次$row数据（查询结果的第一条），并把这个值硬编码到生成的JS代码里。
• 客户端JS执行循环时，每次拿到的都是同一个经纬度和弹窗内容，导致所有标记叠加在同一位置，看起来只有一个标记。

解决方案一：PHP转JSON数组，JS遍历（推荐） #

先在PHP中把所有查询结果整理成数组，转成JSON格式传递给JS，再用JS遍历生成标记：

<?php
// 读取所有查询结果到数组
$locations = [];
while ($row = mysqli_fetch_assoc($result)) {
    $locations[] = [
        'name' => $row['name'],
        'latitude' => $row['latitude'],
        'longitude' => $row['longitude'],
        'number' => $row['number']
    ];
}
// 转成JSON字符串
$locationsJson = json_encode($locations);
?>

<script>
var locations = <?php echo $locationsJson; ?>;
// 遍历数组生成标记
locations.forEach(function(location) {
    var marker = L.marker([location.latitude, location.longitude]).addTo(map);
    marker.bindPopup(location.name + " " + location.number);
});
</script>

解决方案二：PHP循环生成JS代码 #

直接在PHP中遍历查询结果，逐行输出生成标记的JS代码：

<script>
<?php
// PHP循环遍历所有结果
while ($row = mysqli_fetch_assoc($result)) {
    $lat = json_encode($row['latitude']);
    $lng = json_encode($row['longitude']);
    $popupContent = json_encode($row['name'] . " " . $row['number']);
    // 输出每个标记的JS代码
    echo "L.marker([$lat, $lng]).addTo(map).bindPopup($popupContent);\n";
}
?>
</script>

额外验证 #

可以先在PHP中输出查询结果的数量，确认确实有两条数据：

<?php echo "查询结果数量：" . mysqli_num_rows($result); ?>

内容的提问来源于stack exchange，提问作者alb