Highcharts Map点击创建marker并获取经纬度坐标实现示例咨询

API 探路者

2026-10-5

Highcharts Map 点击添加标记并显示经纬度实现示例

核心实现逻辑为监听地图点击事件，获取坐标后动态添加点标记图层即可，完整配置代码如下：

Highcharts.mapChart('container', {
    chart: {
        map: 'custom/world',
        events: {
            click: function (e) {
                // 提取点击位置经纬度
                const lat = e.latLon.lat;
                const lon = e.latLon.lon;
                // 向标记点图层新增点位
                this.series[1].addPoint({
                    lat: lat,
                    lon: lon,
                    name: `${lat.toFixed(2)}, ${lon.toFixed(2)}`
                });
                // 可选：临时弹窗展示坐标
                Highcharts.toast({
                    message: `点击坐标：纬度 ${lat.toFixed(2)}，经度 ${lon.toFixed(2)}`,
                    timeout: 2500
                });
            }
        }
    },
    title: {
        text: '世界地图点击标记功能'
    },
    series: [
        // 底图图层
        {
            name: '世界地图',
            allowPointSelect: false
        },
        // 标记点专属图层
        {
            type: 'mappoint',
            color: '#f43f5e',
            marker: {
                radius: 5,
                lineWidth: 1,
                lineColor: '#fff'
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    ]
});