如何缩放到Highmaps中的特定点 [英] How to zoom to specific point in Highmaps

问题描述

Highmaps / highcharts是一个在浏览器中呈现地图的javascript / jquery适配器。

我强调一个国家的地图，但是， （世界）地图是这样的，我想在地图加载到相关国家后放大。

查看API我觉得这是可能的。 p>

有一个事件监听器，可以在加载时执行自定义函数。正如本例所示，在负载上添加一系列（ Js小提琴）

另外还有一个方法 mapZoom 允许您使用以下参数指定要放大的点：

mapZoom（Number howMuch，[Number但是当我尝试调用这个onload方法时，我们可以使用这个方法来调用这个方法， （我的代码尝试下面，JS小提琴这里），没有任何反应。

  $（function（）{
 
 $ .getJSON（'http://www.highcharts.com/samples/data/jsonp.php函数（数据）{
 
 //分配id的
 $ .each（data，function（）{
 this.id = thi s.code; 
}）; 
 
 //启动图表
 $（'＃container'）。highcharts（'Map'，{
图表：{
 events：{
 load：function（）{
 mapZoom（0.5，100，100）; 
} 
} 
}，
 title：{
 text：'Zoom加载尝试'
}，
 
 
图例：{
标题：{
 text：'每平方公里人口密度'
} 
}，
 
 colorAxis：{
分钟：1，
最大值：1000，
类型：'对数'
}，
 
 mapNavigation：{
启用：true，
 buttonOptions：{
 verticalAlign：'bottom'
} 
}，
 
系列： [{
 data：data，
 mapData：Highcharts.maps ['custom / world-highres']，
 joinBy：['iso-a2'，'code']，
名称：'人口密度'，
 allowPointSelect：true，
光标：'指针'，
状态：{
悬停：{
颜色：'＃BADA55' 
} 
}，
 tooltip：{
 pointFormat：'{point.id} {point.name}'，
 valueSuffix：'/km²'
} 
}] 
}）; 
 
}）; 
}）; 
  

解决方案

mapZoom 是一个属于图表对象的方法，所以为了将其称为en事件（ load ），你必须使用这个关键字来调用它。

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

  ... 
 events：{
 load：function（）{
 this.mapZoom （0.5,100,100）; 
} 
} 
} 
 ... 
  

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

  $（'＃container'）。highcharts（）。mapZoom（0.5，100，100）; 
  

Highmaps / highcharts is a javascript/jquery adapter that renders maps in browsers etc.

I have a map with a single country highlighted, however, the scale of the (world) map is such that I want zoom in after the map is loaded on the country in question.

Looking at the API I feel certain this is possible.

There is an event listener, such that I can execute custom functions on load. As illustrated with this example, where a series is added on load (Js fiddle)

Additionally there is a method mapZoom allowing you to specify a point to zoom to with the following arguments:

mapZoom (Number howMuch, [Number centerX], [Number centerY], [Number mouseX], [Number mouseY])

But when I try and call this method onload (my code attempt below, JS fiddle here), nothing happens.

$(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 is a method that belongs to the chart object so, in order to call it as en event (load), you have to call it using this keyword.

You can edit your code like this (JSFiddle):

...
events: {
    load: function () {
        this.mapZoom(0.5, 100, 100);
        }
    }
}
...

Alternatively, you can call it whenever you want using a jQuery reference (JSFiddle):

$('#container').highcharts().mapZoom(0.5, 100, 100);

这篇关于如何缩放到Highmaps中的特定点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！