如何将生成的JSON数据填充到OI.hexmap对象的hexjson.hexes属性中？

核心步骤 #

1. 确保PHP生成的JSON数据格式合规

   • 必须用PHP的json_encode()生成标准JSON字符串，避免手动拼接导致的语法错误。嵌入HTML的data-map属性时，建议用单引号包裹属性值，避免双引号冲突：

     <?php
     $hexData = [
         'hexes' => [
             'q0r0' => ['q' => 0, 'r' => 0, 'label' => 'A'],
             'q1r0' => ['q' => 1, 'r' => 0, 'label' => 'B']
         ]
     ];
     $jsonStr = json_encode($hexData);
     ?>
     <div id="hex-map" data-map='<?= $jsonStr ?>'></div>
     

   • 禁止生成带尾逗号（trailing commas）的JSON，这是JSON.parse()最常见的语法错误来源。

2. 用jQuery正确读取并解析数据

   • 优先使用jQuery的.data()方法，它会自动识别JSON格式的data-*属性并完成解析，无需手动调用JSON.parse()：

     var mapData = $('#hex-map').data('map');
     

   • 如果必须手动解析，先清理字符串可能的多余空格，再执行解析：

     var rawStr = $('#hex-map').attr('data-map').trim();
     var mapData = JSON.parse(rawStr);
     

3. 正确赋值到嵌套属性

   • 根据HexJSON规范，hex.hexjson.hexes是键值对对象而非数组，因此不能用push方法，直接覆盖或合并即可：

     // 直接替换现有hexes数据
     hex.hexjson.hexes = mapData.hexes;
     // 若需保留原有数据并合并新数据，用Object.assign
     hex.hexjson.hexes = Object.assign({}, hex.hexjson.hexes, mapData.hexes);
     

   • 赋值后如果地图未自动更新，调用库的渲染方法（比如hex.render()）刷新界面。

常见错误排查 #

• JSON.parse语法错误：把PHP生成的JSON字符串复制到浏览器控制台，执行JSON.parse(字符串)查看具体错误位置，通常是未转义的特殊字符、尾逗号或格式错误导致。
• push类型错误：hexes是对象不是数组，push仅适用于数组，直接赋值或合并对象即可解决。

完整示例 #

<div id="hex-container" data-map='{"hexes": {"q0r0": {"q":0,"r":0,"label":"A"}, "q1r0": {"q":1,"r":0,"label":"B"}}}'></div>

<script>
$(document).ready(function() {
    // 读取解析数据
    var mapData = $('#hex-container').data('map');
    
    // 赋值到嵌套属性
    hex.hexjson.hexes = mapData.hexes;
    
    // 重新渲染地图
    if (typeof hex.render === 'function') {
        hex.render();
    }
});
</script>

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