[英]AMChart SVG Map - Zoom to fit all countries
我正在尝试自动缩放到地图上的所有国家。 如果我使用“ groupId”选项对国家/地区进行分组,那么它会起作用,但是比起我也有不必要的分组悬停功能。 我只需要一个鼠标悬停/选择,但想放大到适合边界的国家/地区。
这是一个示例: http : //jsfiddle.net/wiesson/efbnsmpd/
地图数据示例:
dataProvider: {
map: "worldHigh",
areas: [{
"id": "AT",
"customData": "Austria",
"link": "austria",
}, {
"id": "HR",
"customData": "Croatia",
"link": "croatia",
}, {
"id": "FR",
"customData": "France",
"link": "france",
}, {
"id": "DE",
"customData": "Germany",
"link": "germany",
}, {
"id": "GR",
"customData": "Greece",
"link": "greece",
}, {
"id": "IT",
"customData": "Italy",
"link": "italy",
}, {
"id": "MA",
"customData": "Malta",
"link": "malta",
}, {
"id": "PT",
"customData": "Portugal",
"link": "portugal",
}, {
"id": "ES",
"customData": "Spain",
"link": "spain",
}, {
"id": "CH",
"customData": "Switzerland",
"link": "switzerland",
}, {
"id": "TR",
"customData": "Turkey",
"link": "turkey",
}, {
"id": "GB",
"customData": "United Kingdom",
"link": "united-kingdom"
}]
}
我是否需要根据我的国家/地区计算经度/纬度,然后进行缩放? (例如http://docs.amcharts.com/3/javascriptmaps/AmMap#zoomTo(zoomLevel,zoomX,zoomY ,即时)
可能有更好的方法。 zoomToGroup
函数可以接受区域对象的数组(不是id,而是实际对象)。 因此,您可以这样做:
map.addListener("init", function (event) {
var zoomToAreasIds = ['AT', 'HR', 'FR', 'DE', 'GR', 'ID', 'MA', 'PT', 'ES', 'CH', 'TR', 'GB'];
var zoomToAreas = [];
var area;
for(var i = 0; i < zoomToAreasIds.length; i++) {
if (area = map.getObjectById(zoomToAreasIds[i]))
zoomToAreas.push(area);
}
map.zoomToGroup(zoomToAreas);
});
这是您更新的小提琴:
我自己找到了一个可行的解决方案,如下所述: http : //jsfiddle.net/f1Ljtawm/embedded/result,js,html,css/
map.addListener('init', function () {
map.zoomToGroup("zoomed-group");
function toggleMapObjectAlpha(e) {
var alpha = e.type == "rollOverMapObject" ? .3 : .8;
e.event.target.setAttribute("fill-opacity", alpha);
}
map.addListener('rollOverMapObject', toggleMapObjectAlpha);
map.addListener('rollOutMapObject', toggleMapObjectAlpha);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.