如何在关联OpenStreetMap的Highmaps（Highcharts）中点击国家获取国名？

AI 小北

2026-6-16

在Highmaps中点击国家获取名称的实现方法

要实现点击Highmaps中的国家并获取对应名称，只需在地图系列的配置中添加点击事件监听，通过事件对象的point.name属性即可直接获取国家名称。

核心实现步骤

找到Highmaps配置里的plotOptions.series节点
配置point.events.click回调函数，在函数内通过this.name或event.point.name获取国家名称
可将获取到的名称用于控制台打印、页面展示等后续逻辑

示例代码

Highcharts.mapChart('container', {
    chart: {
        map: 'custom/world' // 对应你的地图数据源
    },
    title: {
        text: 'World Map'
    },
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        // 获取并打印国家名称
                        const countryName = this.name;
                        console.log('点击的国家：', countryName);
                        // 也可将名称展示在页面指定元素中
                        document.getElementById('country-info').innerText = `当前点击：${countryName}`;
                    }
                }
            }
        }
    },
    series: [{
        data: [
            { code: 'CN', name: 'China', value: 1 },
            { code: 'US', name: 'United States', value: 2 }
            // 更多国家数据...
        ]
    }]
});