Javascript 如何在Highmaps中缩放到特定点

Highmaps/highcharts是一个javascript/jquery适配器，用于在浏览器等中呈现地图

我有一张突出显示单个国家的地图，但是（世界）地图的比例是这样的，我希望在地图加载到相关国家后放大

看看API，我确信这是可能的

有一个事件监听器，我可以在加载时执行自定义函数。如本例所示，其中加载时添加了一个系列（）

此外，还有一种方法

mapZoom

，允许您使用以下参数指定要缩放到的点：

地图缩放（数字多少，[Number centerX]，[Number centerY]，[Number mouseX]，[Number mouseY]）

但是当我尝试调用这个onload方法（下面是我的代码尝试，jsfiddle）时，什么都没有发生

$(function () {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {

        // Assign id's
        $.each(data, function () {
            this.id = this.code;
        });

        // Initiate the chart
        $('#container').highcharts('Map', {
            chart: {
                events: {
                    load: function () {
                    mapZoom(0.5, 100, 100);
                    }
                }
            },
            title: {
                text: 'Zoom on load attempt'
            },


            legend: {
                title: {
                    text: 'Population density per km²'
                }
            },

            colorAxis: {
                min: 1,
                max: 1000,
                type: 'logarithmic'
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            series : [{
                data : data,
                mapData: Highcharts.maps['custom/world-highres'],
                joinBy: ['iso-a2', 'code'],
                name: 'Population density',
                allowPointSelect: true,
                cursor: 'pointer',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                tooltip: {
                    pointFormat: '{point.id} {point.name}',
                    valueSuffix: '/km²'
                }
            }]
        });

    });
});

---

mapZoom

是属于

chart

对象的一种方法，因此，要将其作为en事件（

load

）调用，必须使用

this

关键字调用它

您可以像这样编辑代码（）：

或者，您可以随时使用jQuery引用（）调用它：

---

缩放到地图上的特定国家很容易

series : [{
            ...
            data: [{code: 'HU', id: 'HU', value: 7.5, name: 'Hungary'}],
            ...
            }

……然后

var mapChart=$('#MapContainer').highcharts(); //get map chart object from DOM
mapChart.get('HU').zoomTo(); //zoom to the country using "id" from data serie
mapChart.mapZoom(5); //elevate viewpoint a little to see surrounding countries as well

---

如果要缩放多个国家，可以尝试此操作

events: {
    load: function () {
    var mapChart = this;
    ['DE', 'HU', 'RO'].map(function(code){
        return mapChart.get(code);
    }).reduce(function(acc, current){
      // Set map bounds
      acc._minX = isNaN(acc._minX) ? current._minX : Math.min(acc._minX, current._minX);
      acc._maxX = isNaN(acc._maxX) ? current._maxX : Math.max(acc._maxX, current._maxX);
      acc._minY = isNaN(acc._minY) ? current._minY : Math.min(acc._minY, current._minY);
      acc._maxY = isNaN(acc._maxY) ? current._maxY : Math.max(acc._maxY, current._maxY);
      return acc;
    }).zoomTo(); 
 }}

---

如何放大到特定（lat，lon）位置？

var pos=this.fromlontopoint（{lat:51.5，lon:2.0}）
this.mapZoom（0.1，this.xAxis[0].toPixels（pos.x），this.yAxis[0].toPixels（pos.y））正在放大，但未放大到所需位置嗨，放大到x，y并不意味着要放大到x纬度，y经度。地图的坐标系不同于地理坐标系-90:90，-180:180。如果要进行转换，则需要使用proj4库。请参阅此讨论：我发现您关于使用zoom的答案并不准确。你知道需要做什么改变吗？
var mapChart=$('#MapContainer').highcharts(); //get map chart object from DOM
mapChart.get('HU').zoomTo(); //zoom to the country using "id" from data serie
mapChart.mapZoom(5); //elevate viewpoint a little to see surrounding countries as well

events: {
    load: function () {
    var mapChart = this;
    ['DE', 'HU', 'RO'].map(function(code){
        return mapChart.get(code);
    }).reduce(function(acc, current){
      // Set map bounds
      acc._minX = isNaN(acc._minX) ? current._minX : Math.min(acc._minX, current._minX);
      acc._maxX = isNaN(acc._maxX) ? current._maxX : Math.max(acc._maxX, current._maxX);
      acc._minY = isNaN(acc._minY) ? current._minY : Math.min(acc._minY, current._minY);
      acc._maxY = isNaN(acc._maxY) ? current._maxY : Math.max(acc._maxY, current._maxY);
      return acc;
    }).zoomTo(); 
 }}