如何将PHP数据循环转换为JavaScript对象？

你当前的代码存在几个问题，导致无法输出预期的对象数组，咱们先理清楚问题所在，再给出两种可行的解决方案：

原代码的问题分析 #

• 对象引用重复：你每次循环都复用同一个mapObject，但JS里的对象是引用类型——就像你反复修改同一个本子，然后把本子的“地址”多次放进数组里，最后数组里的所有条目指向的都是最后修改的那个本子内容。
• 语法错误：<?= echo $location['lat'] ?>是多余的写法，<?=本身就已经是输出内容的短标签了，不需要再加echo，直接写<?= $location['lat'] ?>就行。
• 数据类型不符：你把经纬度用引号包成了字符串，但预期输出是数字类型，这会影响后续可能的地图计算或渲染。

方案一：用PHP的json_encode直接转换（推荐） #

这种方法最简洁高效，还能避免PHP和JS代码混写的混乱，思路是先在PHP里把所有数据整理成数组，再转成符合JS语法的JSON格式：

<?php
// 先在PHP中循环收集所有坐标数据
$mapData = [];
while(have_rows('package_map')){
    the_row();
    $location = get_sub_field('package_map_points');
    // 把经纬度转为数字类型（确保数据格式正确）
    $mapData[] = [
        'lat' => (float)$location['lat'],
        'lng' => (float)$location['lng']
    ];
}
?>

<script type="text/javascript">
// 直接把PHP数组转成JS对象数组
var mapArray = <?= json_encode($mapData) ?>;
</script>

小贴士：json_encode会自动处理数据类型和特殊字符，还能避免XSS风险，是PHP和JS传递数据的最佳实践。

方案二：修改原有的JS循环逻辑 #

如果一定要保留PHP和JS混写的方式，那就要每次循环都创建新的对象，避免引用重复：

<script type="text/javascript">
var mapArray = [];
</script>

<?php while(have_rows('package_map')){
    the_row();
    $location = get_sub_field('package_map_points');
?>
<script type="text/javascript">
// 每次循环都创建一个新的匿名对象，直接push到数组里
mapArray.push({
    lat: <?= $location['lat'] ?>,
    lng: <?= $location['lng'] ?>
});
</script>
<?php } ?>

这样每次循环都会生成一个全新的对象，数组里的每个条目都是独立的，而且经纬度是以数字类型存储的，完全符合你的预期格式。

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