Mapbox GLJS从PHP+MySQL读取经纬度加载地图标记页面空白问题已解决

我仔细看了你的代码，页面空白、地图和标记都不显示的核心原因是JavaScript语法错误，再加上PHP数据库连接的老旧写法问题，咱们一步步来修复：

1. 直接导致JS解析失败的语法错误 #

你手动拼接GeoJSON的时候犯了两个低级错误：

• 拼写错误：coordintes → 正确应该是coordinates（少了一个字母r）
• 语法缺失：properties { → 正确应该是properties: {（属性定义缺了冒号）
  这两个错误会让浏览器的JS引擎直接报错中断，后续地图初始化和标记加载的代码根本跑不起来。

2. GeoJSON的尾逗号问题 #

while循环最后一条记录后面会多输出一个逗号，虽然部分浏览器能容忍，但严格来说这属于无效的JSON语法，会导致GeoJSON解析失败。

3. 废弃的mysql扩展问题 #

mysql_connect这类函数早在PHP 7版本就被彻底废弃了，现在的PHP环境根本跑不了，必须换成mysqli扩展，而且直接把数据库错误信息echo到JS代码里，会彻底破坏JS语法结构。

修正后的完整代码 #

<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Live Map</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.marker { background-image: url('mapbox-icon.png'); background-size: cover; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'MY_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});

<?php
// 替换为现代的mysqli扩展
$conn = mysqli_connect("localhost", "DB_USER", "DB_PASS", "locationLogs");
if (!$conn) {
    // 错误信息不要输出到JS中，避免破坏语法
    die("数据库连接失败: " . mysqli_error($conn));
}

$sql = "SELECT * FROM locations";
$result = mysqli_query($conn, $sql);
if (!$result) {
    die("查询失败: " . mysqli_error($conn));
}

// 先把数据存到数组，再用json_encode生成正确的GeoJSON
$features = [];
while ($row = mysqli_fetch_assoc($result)) {
    $features[] = [
        'type' => 'Feature',
        'geometry' => [
            'type' => 'Point',
            'coordinates' => [(float)$row['longitude'], (float)$row['latitude']]
        ],
        'properties' => [
            'title' => 'Location',
            'description' => 'A cool location'
        ]
    ];
}
mysqli_free_result($result);
mysqli_close($conn);

// 自动生成合法的GeoJSON字符串，彻底避免手动拼接的语法问题
echo "const geojson = " . json_encode(['type' => 'FeatureCollection', 'features' => $features]) . ";";
?>

// 给每个GeoJSON特征添加标记
for (const feature of geojson.features) {
const el = document.createElement('div');
el.className = 'marker';
new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
}
</script>
</body>
</html>

额外小贴士 #

• 用json_encode生成GeoJSON比手动拼接字符串靠谱100倍，它会自动处理数据类型、语法格式和尾逗号问题，再也不用怕拼写错误。
• 如果还是有问题，按F12打开浏览器开发者工具，看Console标签里的错误提示，能快速定位问题。

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