关于将数据导入Google Charts API地理地图及复选框计数的技术问询

我来帮你把这两个技术点的实现逻辑梳理清楚，同时给出完整的可复用代码方案：

一、已实现的复选框统计模块优化与详解 #

你已经完成的复选框统计逻辑很扎实，通过表单POST提交到results.php处理计数和选中值输出，我把你提到的调试代码补全并整理成完整可运行的版本：

前端表单代码 #

<form action="results.php" method="post">
  <table width="100%">
    <tr class="main">
      <td width="190">
        <h2>选择国家</h2>
      </td>
    </tr>
    <!-- 可根据需求扩展更多国家选项 -->
    <tr>
      <td>
        <input type="checkbox" name="countries[]" value="China"> 中国<br>
        <input type="checkbox" name="countries[]" value="USA"> 美国<br>
        <input type="checkbox" name="countries[]" value="Japan"> 日本<br>
        <input type="checkbox" name="countries[]" value="Germany"> 德国<br>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" value="提交统计">
      </td>
    </tr>
  </table>
</form>

这里核心是给复选框设置name="countries[]"，这样后端能批量接收所有选中的选项值。

后端results.php处理代码 #

<?php
// 初始化统计变量
$selectedCount = 0;
$selectedCountries = [];

// 仅处理POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 检查是否有选中的国家选项
    if (isset($_POST['countries']) && is_array($_POST['countries'])) {
        $selectedCount = count($_POST['countries']);
        $selectedCountries = $_POST['countries'];
    }

    // 输出统计结果
    echo "<h3>统计结果</h3>";
    echo "已选中的国家数量：" . $selectedCount . "<br><br>";
    echo "已选中的国家：" . ($selectedCount > 0 ? implode(', ', $selectedCountries) : "无");
}
?>

这段代码会安全地接收POST数据，统计选中数量并输出选中的国家名称，完全符合你提到的需求。

二、将选中数据导入Google Charts地理地图 #

要把复选框选中的国家数据可视化到Google Charts地理地图，我提供两种实用方案，你可以根据场景选择：

方案1：前端无跳转实时渲染地图（推荐） #

这种方式用户体验更好，提交表单后直接在当前页面展示地图和统计结果，无需跳转：

<!-- 引入Google Charts库 -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 加载地理地图包
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(init);

function init() {
    // 默认渲染空地图
    drawMap([]);
}

function drawMap(selectedCountries) {
    // 构造地图数据结构
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Country'); // 国家名称（需符合Google Charts的标准值）
    data.addColumn('number', 'Selected'); // 标记是否选中（0=未选中，1=选中）
    
    // 基础国家列表，可根据需求扩展
    var allCountries = [
        ['China', 0], ['USA', 0], ['Japan', 0], ['Germany', 0]
    ];
    
    // 将选中的国家标记为高亮状态
    selectedCountries.forEach(country => {
        const matchIndex = allCountries.findIndex(item => item[0] === country);
        if (matchIndex !== -1) {
            allCountries[matchIndex][1] = 1;
        }
    });
    
    data.addRows(allCountries);

    // 地图配置选项
    var options = {
        title: '选中国家分布地图',
        colorAxis: {colors: ['#f0f0f0', '#1a73e8']}, // 未选中/选中的颜色
        legend: 'none'
    };

    // 渲染地图到指定容器
    var chart = new google.visualization.GeoChart(document.getElementById('map_container'));
    chart.draw(data, options);
}

// 监听表单提交事件，阻止默认跳转
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 获取所有选中的国家值
    const selectedItems = Array.from(document.querySelectorAll('input[name="countries[]"]:checked'))
                              .map(input => input.value);
    
    // 更新统计信息
    document.getElementById('stats_area').innerHTML = `
        <h3>统计结果</h3>
        <p>已选中国家数量：${selectedItems.length}</p>
        <p>已选中国家：${selectedItems.length > 0 ? selectedItems.join(', ') : '无'}</p>
    `;
    
    // 渲染地图
    drawMap(selectedItems);
});
</script>

<!-- 表单区域 -->
<form>
  <table width="100%">
    <tr class="main">
      <td width="190">
        <h2>选择国家</h2>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="countries[]" value="China"> 中国<br>
        <input type="checkbox" name="countries[]" value="USA"> 美国<br>
        <input type="checkbox" name="countries[]" value="Japan"> 日本<br>
        <input type="checkbox" name="countries[]" value="Germany"> 德国<br>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" value="提交查看地图">
      </td>
    </tr>
  </table>
</form>

<!-- 统计信息显示区域 -->
<div id="stats_area"></div>
<!-- 地图渲染容器 -->
<div id="map_container" style="width: 900px; height: 500px; margin-top: 20px;"></div>

方案2：保留results.php跳转，在结果页渲染地图 #

如果你需要保留原有的跳转逻辑，可以修改results.php，让它直接输出包含地图的页面：

<?php
// results.php
$selectedCount = 0;
$selectedCountries = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['countries']) && is_array($_POST['countries'])) {
        $selectedCount = count($_POST['countries']);
        $selectedCountries = $_POST['countries'];
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>统计结果与地图</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['geochart']});
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
        // 从PHP获取选中的国家数据
        const selectedCountries = <?php echo json_encode($selectedCountries); ?>;
        
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Country');
        data.addColumn('number', 'Selected');
        
        var allCountries = [['China', 0], ['USA', 0], ['Japan', 0], ['Germany', 0]];
        selectedCountries.forEach(country => {
            const index = allCountries.findIndex(item => item[0] === country);
            if (index !== -1) {
                allCountries[index][1] = 1;
            }
        });
        
        data.addRows(allCountries);

        var options = {
            title: '选中国家分布地图',
            colorAxis: {colors: ['#f0f0f0', '#1a73e8']},
            legend: 'none'
        };

        var chart = new google.visualization.GeoChart(document.getElementById('map_container'));
        chart.draw(data, options);
    }
    </script>
</head>
<body>
    <h3>统计结果</h3>
    <p>已选中的国家数量：<?php echo $selectedCount; ?></p>
    <p>已选中的国家：<?php echo $selectedCount > 0 ? implode(', ', $selectedCountries) : '无'; ?></p>
    
    <div id="map_container" style="width: 900px; height: 500px; margin-top: 20px;"></div>
</body>
</html>

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