在 World jVectorMap 上显示自定义区域标签答案

【问题标题】：Show Custom Region Label on World jVectorMap在 World jVectorMap 上显示自定义区域标签
【发布时间】：2026-02-10 08:45:01
【问题描述】：

我有一个 jvector 地图的 JSON 代码，如下所示：

[
 {"Country":"Australia","CountryCode":"AU","persons":"5"}, 
 {"Country":"Spain","CountryCode":"ES","persons":"2"}, 
 {"Country":"India","CountryCode":"IN","persons":"8"}, 
 {"Country":"Mexico","CountryCode":"MX","persons":"4"},
 {"Country":"United States","CountryCode":"US","persons":"4"}
]

JVector 地图根据数据填充国家的颜色，但其上的标签仅显示国家名称。我想显示没有。国家标签上的人：

这是我正在使用的脚本：

<script type="text/javascript">
var dataC = <?php echo $data ?>;
var countryData = {};
$.each(dataC, function() {
countryData[this.CountryCode] = this.persons;
countryData[this.persons] = this.persons;
});

$(function() {
 $('#world-map').vectorMap({
 map: 'world_mill_en',
 series: {
    regions: [{
        values: countryData, //load the data
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial'}]
   },
   onRegionLabelShow: function(e, el, code) {
        //search through dataC to find the selected country by it's code
        var country = $.grep(dataC.countryData, function(obj, index) {
            return obj.CountryCode == code;
        })[0]; //snag the first one
        //only if selected country was found in dataC

            el.html(el.html() + 
                    "<br/><b>Code: </b>" +country.countryCode + 
                    "<br/><b>Percent: </b>" + country.persons + 
                    "<br/><b>Country Name: </b>"+ country.Country);

    }
});
});
</script>

我只想表明不。彩色标签上的人数与 JSON 中一样

【问题讨论】：

我对代码一无所知，但这不是 if 里面的部分在做什么吗？ if (country != undefined) {
即使我删除了 if 语句，它也不起作用。

标签： php json jvectormap

【解决方案1】：

我正在使用这段代码来显示自定义信息：

onRegionTipShow: function(e, label, code){
//hovering disabled for disabled regions
if ( isCountryDisabled(code) )
    {
        e.preventDefault();
        label.html( '<b>'+label.html()+' - test</b>');
        return false;
    }
var country = getCountryDetails(code);
if(country === undefined) {
    label.html( '<b>'+label.html()+'</b>');
}else{
    label.html( '<b>'+label.html()+' - '+country.en+'</b>');
}
}

你可以看到我有一些功能可以检查国家是否应该显示自定义标签。我还有一个功能可以获取国家/地区的详细信息。

基本上你调用的是onRegionLabelShow，我使用的是onRegionTipShow。但两者都应该工作。可能您传递了一些错误的数据并且可能存在错误。尝试仅使用 HTML（无变量）创建标签，看看您是否能够修改它，一旦您可以开始使用变量。

【讨论】：