如何将JS变量与PHP生成的JSON绑定以实现Google地图标记配置

你遇到的核心问题是：JSON是纯数据格式，无法直接引用JavaScript环境中已存在的变量。当你用json_encode()处理PHP数组时，数组里的'map'=>'map'和'icon'=>'image'会被转换成JS字符串"map"和"image"，而不是直接引用你之前定义的map和image JS变量，所以标记无法正确关联到地图和自定义图标。

下面给你两种可行的解决思路：

方案一：拆分数据与变量引用（推荐） #

PHP只传递标记的核心数据（位置、标题、标签），然后在JS中手动补充map和icon变量引用，这种方式最清晰也最不容易出错。

步骤1：修改PHP数组 #

去掉不需要转成字符串的map和icon字段：

<?php 
$markarr = [
    [
        'position' => ['lat' => 34.775974, 'lng' => 120.329628],
        'title' => 'Place A',
        'label' => 'A'
    ],
    [
        'position' => ['lat' => 35.547591, 'lng' => 115.467302],
        'title' => 'Place B',
        'label' => 'B'
    ],
    [
        'position' => ['lat' => 34.734375, 'lng' => 117.408866],
        'title' => 'Place C',
        'label' => 'C'
    ]
]; 
?>

步骤2：在JS中生成完整的标记配置 #

利用数组的map()方法，给每个数据项补充map和icon变量：

<script>
// 先获取从PHP传递过来的标记基础数据
const markerData = <?php echo json_encode($markarr); ?>;

// 生成完整的标记配置，直接引用已有的map和image变量
const marker_config = markerData.map(item => ({
    ...item, // 展开原有的position、title、label
    map: map, // 关联到之前创建的Google地图实例
    icon: image // 关联到之前定义的自定义图标对象
}));

// 接下来就可以创建标记和信息窗口了
marker_config.forEach(config => {
    // 创建标记
    const marker = new google.maps.Marker(config);
    
    // 示例：添加信息窗口
    const infowindow = new google.maps.InfoWindow({
        content: `<h3>${config.title}</h3>`
    });
    
    marker.addListener('click', () => {
        infowindow.open(map, marker);
    });
});
</script>

方案二：占位符替换（兼容原有数组结构） #

如果你想保留PHP数组的完整结构，可以用占位符标记需要替换成JS变量的字段，然后在JS中遍历替换：

步骤1：PHP数组中使用占位符 #

<?php 
$markarr = [
    [
        'position' => ['lat' => 34.775974, 'lng' => 120.329628],
        'map' => '__MAP_VAR__',
        'title' => 'Place A',
        'label' => 'A',
        'icon' => '__IMAGE_VAR__'
    ],
    // ...其他标记项
]; 
?>

步骤2：JS中替换占位符为实际变量 #

<script>
let marker_config = <?php echo json_encode($markarr); ?>;

// 遍历每个标记配置，替换占位符
marker_config.forEach(config => {
    config.map = map;
    config.icon = image;
});

// 后续创建标记的代码和方案一一致
</script>

为什么直接去掉PHP引号不行？ #

在PHP中，如果你写'map'=>map，PHP会把map当作一个未定义的常量，要么抛出错误，要么自动转换成字符串'map'，最终还是会被json_encode转成JS字符串，无法引用到JS中的map变量——这是PHP和JS两个环境的变量隔离导致的，必须在JS层面处理变量引用。

内容的提问来源于stack exchange，提问作者перевод и субтитр Петровы