如何将PHP生成的JSON数据传入JQVMap？当前地图无数据显示

看起来你遇到的核心问题有两个：一是JQVMap的values字段需要ISO两位国家代码作为键，而非国家名称；二是可能存在数据传递的变量作用域或格式问题。下面一步步帮你解决：

第一步：修正PHP代码，输出JQVMap兼容的键值对 #

JQVMap的values属性要求键是ISO 3166-1 alpha-2国家代码（比如"US"、"CN"），而不是国家全称。你当前代码用geoip_country_name_by_id获取的是国家名称，这会导致地图无法匹配到对应的区域。

修改后的PHP代码：

<?php
// 确保已初始化$odb数据库连接和$gi geoip资源
$csel = $odb->query("SELECT country, COUNT(*) AS cnt FROM bots GROUP BY country ORDER BY cnt ");
$countryData = array();

while ($c = $csel->fetch()) {
    // 获取两位国家代码，替代国家名称
    $countryCode = geoip_country_code_by_id($gi, $c[0]);
    $count = number_format($c[1]);
    // 用国家代码作为键，统计数量作为值
    $countryData[$countryCode] = $count;
}

// 输出标准JSON格式数据
echo json_encode($countryData);
?>

第二步：正确将数据传入JQVMap #

这里分两种常见场景处理：

场景1：PHP与JS代码在同一PHP文件中 #

如果你的JQVMap脚本直接写在PHP文件里，确保$countryData变量在JS代码执行前已定义，直接注入JSON即可：

<script>
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        // 直接输出PHP生成的JSON数据
        values: <?php echo json_encode($countryData); ?>,
        normalizeFunction: 'polynomial'
    });
});
</script>

场景2：PHP与JS为单独文件（推荐，代码更清晰） #

如果你的JS是独立的.js文件，无法直接嵌入PHP代码，就用AJAX异步加载数据：

1. 将修正后的PHP代码保存为get-country-data.php，访问该文件确认能输出类似{"US":"1,234","CN":"567"}的标准JSON
2. 在JS脚本中用jQuery请求数据并初始化地图：

jQuery(document).ready(function () {
    // 异步请求PHP生成的国家数据
    $.getJSON('get-country-data.php', function(countryData) {
        // 数据加载成功后初始化地图
        jQuery('#vmap').vectorMap({
            map: 'world_en',
            backgroundColor: '#333333',
            color: '#ffffff',
            hoverOpacity: 0.7,
            selectedColor: '#666666',
            enableZoom: true,
            showTooltip: true,
            scaleColors: ['#C8EEFF', '#006491'],
            values: countryData,
            normalizeFunction: 'polynomial'
        });
    })
    .fail(function() {
        // 处理请求失败的情况，便于调试
        console.error('加载国家数据失败，请检查PHP脚本');
    });
});

第三步：调试验证 #

1. 打开浏览器开发者工具的控制台，检查是否有JS语法错误或AJAX请求失败提示
2. 确认地图容器#vmap已在页面上正确渲染，且设置了足够的宽高（比如width: 100%; height: 500px;）
3. 查看PHP输出的JSON是否符合格式要求，键为两位国家代码，值为数字或格式化后的字符串

这样调整后，地图应该能正确加载并显示你的统计数据了。

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