Highmaps/highcharts 是一个 javascript/jquery 适配器,可以在浏览器等中呈现 map 。
我有一张 map ,其中突出显示了一个国家,但是,(世界) map 的比例使得我想在 map 加载到相关国家后放大。
查看 API,我确信这是可能的。
有一个事件监听器,这样我就可以在加载时执行自定义函数。如本例所示,在加载时添加了一个系列 ( Js fiddle )
此外,还有一个方法 mapZoom
允许您使用以下参数指定要缩放到的点:
mapZoom (Number howMuch, [Number centerX], [Number centerY], [Number mouseX], [Number mouseY])
但是当我尝试调用此方法 onload(我的代码尝试在下面,JS fiddle here)时,没有任何反应。
$(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
关键字调用它。
您可以像这样编辑您的代码 ( JSFiddle ):
...
events: {
load: function () {
this.mapZoom(0.5, 100, 100);
}
}
}
...
或者,您可以随时使用 jQuery 引用 (JSFiddle) 调用它:
$('#container').highcharts().mapZoom(0.5, 100, 100);
关于javascript - 如何缩放到 Highmaps 中的特定点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28933713/