基于PHP+MySQL的Leaflet地图标记无法加载问题求助

核心问题：经纬度数据类型不匹配 #

你的JSON输出里，lat和lon都是字符串类型（例如"63.36601"），但Leaflet的L.LatLng()构造函数要求传入**数值类型（Number）**的参数。字符串无法被解析为有效的地理坐标，导致标记无法渲染到地图上。

具体修复方案 #

1. 在PHP层转换数据类型（最优解） #

直接在数据库查询后，把字符串格式的经纬度转成浮点型，这样生成的JSON里就是数值：

$sqls = mysqli_query($dbSQLi, "SELECT * FROM poster");
$data = array();
while ($roww = mysqli_fetch_array($sqls)) {
    $data[] = array(
        "lat" => (float)$roww["gps_lat"],
        "lon" => (float)$roww["gps_long"],
        "Details" => $roww['nr']
    );
}
// 注意：如果是嵌入JS页面，确保这段代码在JS输出之前执行
// 如果是独立接口文件，保留echo json_encode($data);

2. 前端层兜底转换（应急方案） #

如果暂时无法修改PHP代码，可在JS循环中手动转换字符串为数值：

for (var i = 0; i < data.length; i++) {
    // 用parseFloat将字符串转为数值
    var new_location = new L.LatLng(
        parseFloat(data[i].lat),
        parseFloat(data[i].lon)
    );
    // 后续标记创建代码不变
    var place = data[i].Details;
    var marker = new L.Marker(new_location, { title: place });
    marker.bindPopup('Demo: ' + place);
    city.addLayer(marker);
}

3. 检查MarkerCluster依赖是否完整 #

你使用了L.markerClusterGroup()，必须确保已经引入Leaflet.markercluster的JS和CSS文件。如果不需要标记聚合功能，可直接替换为普通图层组：

// 替换markerClusterGroup为普通图层组
var city = L.layerGroup();

4. 确认PHP变量作用域 #

确保在输出JS代码之前，PHP已经完成数据库查询并正确赋值给$data变量，否则<?php echo json_encode($data); ?>会输出空数组或null，导致JS循环无法执行。

验证方式 #

打开浏览器开发者工具（F12），在控制台输入data，查看输出的数组中lat和lon是否为无引号的数值。如果仍为带引号的字符串，说明数据类型转换未生效。

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