highchart 地图通过单击创建标记并获取经纬度坐标

Question

我最近开始使用地图插件。并面临在点击时创建标记并在世界地图上显示经纬度的问题。也许有人有一个如何实现这个的例子。感谢您的协助。

Answer 1

您可以对图表和系列使用 click 事件，计算纬度和经度值并将新点添加到 mappoint 系列。

Highcharts.mapChart('container', {
    chart: {
        map: 'custom/world-continents',
        events: {
            click: function(e) {
                const latlon = this.fromPointToLatLon({
                    x: e.xAxis[0].value,
                    y: e.yAxis[0].value
                });

                this.series[1].addPoint(latlon);
            }
        }
    },

    plotOptions: {
        map: {
            events: {
                click: function(e) {
                    const {
                        chart,
                        xAxis,
                        yAxis
                    } = this;

                    const latlon = chart.fromPointToLatLon({
                        x: xAxis.toValue(e.x),
                        y: yAxis.toValue(e.y)
                    });

                    chart.series[1].addPoint(latlon);
                }
            }
        }
    },
    ...
    series: [{
        ...
    }, {
        type: 'mappoint',
        colorAxis: null,
        enableMouseTracking: false,
        color: 'red',
        dataLabels: {
            allowOverlap: true,
            formatter: function() {
                const {
                    lat,
                    lon
                } = this.point;

                return 'Lat: ' + (lat.toFixed(2)) + '<br>Lon: ' + (lon.toFixed(2))
            }
        }
    }]
});

现场演示： https://jsfiddle.net/BlackLabel/6p1bv0jn/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Chart#transformToLatLon

https://api.highcharts.com/highmaps/chart.events.click

https://api.highcharts.com/highmaps/plotOptions.map.events.click

highchart 地图通过单击创建标记并获取经纬度坐标

highchart map create marker by click and get lat long coordinates

vector

highcharts