如何正确将PHP数组传递至Leaflet Heatmap？

问题分析 #

从你的描述和代码来看，核心问题出在PHP端的JSON生成逻辑，同时JS端也存在数据加载时机的错误，导致热力图无法获取格式匹配的有效坐标数组。

一、PHP代码的核心错误及修正 #

你的PHP代码存在几个关键问题：

1. 未初始化$datasets数组，第一次执行array_push会触发报错；
2. 在循环内重复执行json_encode并输出，返回的是多个零散的JSON片段，而非一个完整的数组JSON；
3. 字段名不匹配：热力图要求经度字段为lng，但你用了lon；
4. 多余的print_r($row)会污染JSON输出，导致前端无法正确解析；
5. 错误地将JSON_FORCE_OBJECT作为array_push的参数，这个参数属于json_encode方法，不应放在数组推送逻辑里。

修改后的PHP代码

<?php
// 初始化PDO连接（请补全你的数据库密码）
$db = new PDO('mysql:host=127.0.0.1;dbname=movementprofile;', 'root', '你的数据库密码');
// 设置PDO仅返回关联数组，避免同时出现索引键和关联键
$db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

$query = 'SELECT longitude, latitude FROM movementprofile WHERE longitude IS NOT NULL AND latitude IS NOT NULL';

// 初始化存储坐标数据集的数组
$datasets = [];

foreach ($db->query($query) as $row) {
    // 严格匹配热力图要求的字段名：lng（经度）、lat（纬度）、count
    $singleDataset = [
        'lng' => $row['longitude'],
        'lat' => $row['latitude'],
        'count' => 1
    ];
    array_push($datasets, $singleDataset);
}

// 设置响应头为JSON格式，让前端自动识别并解析
header('Content-Type: application/json');
// 最后一次性输出完整的JSON数组
echo json_encode($datasets);
?>

二、JS代码的问题修正 #

你的JS代码存在数据加载时机错误：页面初始化时就调用了getGeoData()，但此时AJAX请求还未完成，geoData是undefined，导致热力图无法获取有效数据。同时热力图的初始化逻辑也需要调整：

修改后的JS关键部分

var geoData;
var heatmapLayer;
// 定义热力图基础配置（可根据需求调整）
var cfg = {
    "radius": 20,
    "maxOpacity": .8,
    "scaleRadius": true,
    "useLocalExtrema": true,
    latField: 'lat',
    lngField: 'lng',
    valueField: 'count'
};

// 初始化地图（保留你原有的地图代码）
var mymap = L.map('mapid').setView([51.25, 10.5], 6);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxToken, {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

// 提前初始化热力图层并添加到地图
heatmapLayer = new HeatmapOverlay(cfg).addTo(mymap);

function loadData() {
    console.log("加载数据中...");
    getJSON();
}

function getJSON() {
    $.ajax({
        url: "assets/php/readGeoData.php",
        type: "GET",
        dataType: "json", // 注意是驼峰命名的dataType，不是datatype
        success: function(data) {
            console.log("AJAX传输成功");
            geoData = data;
            // 数据加载完成后再更新热力图
            updateHeatmap();
        },
        error: function(xhr, status, error) {
            console.error("AJAX请求失败:", error);
        }
    })
}

function updateHeatmap() {
    // 组装热力图要求的完整数据格式
    var heatmapData = { 
        max: 8, 
        data: geoData 
    };
    // 更新热力图数据
    heatmapLayer.setData(heatmapData);
}

// 按钮点击事件（保留原有逻辑）
$("#importButton").click(function() {
    loadData();
});

关键说明 #

1. PHP端：确保只输出一次完整的JSON数组，字段名严格匹配热力图要求；通过Content-Type响应头告知前端返回的是JSON数据，让jQuery自动完成解析。
2. JS端：
   • 热力图提前初始化，数据更新逻辑放在AJAX的success回调中，保证只有当数据加载完成后才更新热力图；
   • 修正了datatype为jQuery要求的驼峰命名dataType；
   • 添加错误回调方便调试AJAX请求问题。

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