如何在PHP中生成Google Maps所需的JavaScript locations数组？

你的代码存在几个关键问题，导致无法生成正确的locations数组：

1. 重复定义变量+语法错误：循环中每次都重新声明var locations，且地点名称作为字符串未加引号，直接拼接会触发JS语法错误。
2. 数组结构构建错误：每次循环只输出单个元素却包裹了整个数组定义，最终只会保留最后一条数据，且格式不符合要求。
3. 手动拼接字符串风险：未处理特殊字符（比如地点名称里的引号、空格），容易引发语法问题或XSS风险。

修正后的代码 #

PHP部分（替换原PHP代码块）

<div id="map" style="width: 1150px; height: 500px;"></div>

<?php  
require 'dp.php';
$db = new DB();

$records = $db->shop_locat();
// 用json_encode将PHP数组转为合法的JS数组格式
$locationsJson = !empty($records) ? json_encode($records) : '[]';
?>

<script type="text/javascript">
// 将JSON字符串转为JS数组，同时调整为[name, lat, lng]的目标格式
var locations = <?php echo $locationsJson; ?>.map(item => [item.name, parseFloat(item.lat), parseFloat(item.lng)]);
</script>

JavaScript部分（保留原逻辑即可）

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10.5,
    center: new google.maps.LatLng(14.6417, 120.4818),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
        
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng( locations[i][1], locations[i][2] ),
        map: map});
          
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

关键改进点说明 #

• 用json_encode替代手动拼接：自动处理字符串引号、转义特殊字符，确保生成的JS代码语法完全合法，避免手动拼接的繁琐和错误。
• 数组结构转换：通过map方法将PHP返回的对象数组快速转为你需要的[名称, 纬度, 经度]格式，逻辑清晰高效。
• 空值兜底处理：当数据库无数据时，默认生成空数组，避免JS报错。

另外，建议检查dp.php中shop_locat方法返回的lat和lng是否为数字类型，如果是字符串，parseFloat会自动转为数字，确保地图标记位置正确。

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