jvectormap合并两个地图

我想合并两个jvectormaps：italy-regions和italy-provinces，我想要实现类似于drill-down example的东西，或者甚至只是在地区和省份都有地图。
我想是因为italy-provinces地图只是一个脚本里面所有的省份，我不能在演示中使用multimap一样，所以对于检索每个区域的地图的主要功能是没用的：jvectormap合并两个地图

mapUrlByCode: function(code, multiMap){ 
    return '/js/us-counties/jquery-jvectormap-data-'+ 
     code.toLowerCase()+'-'+ 
     multiMap.defaultProjection+'-en.js'; 
}

在这种pen我我再现了与我试图达到的目标类似的东西。
很明显，这个解决方案非常糟糕，因为我使用了两张地图，一旦我点击第一张地图的随机区域，第二张地图就不会缩放，所以这两张地图看起来并不同步。有人知道或可以建议一种方法来实现我所需要的？

来源

2017-03-01 Nicolò Cozzani

幸运的是，伟大的jVectorMap还支持专注于多个地区，所以您需要的只是创建区域和省份之间的关联并调用该功能两次。

我revorked了一下你的代码以某种方式更为 “明确的” 关于省和地区：

HTML：

<div id="map-provinces"></div> 
<div id="map-regions"></div>

CSS：

#map-provinces{ 
    height:500px; 
    width: 500px; 
    left:-500px; 
    opacity:0.5; 
} 
#map-regions{ 
    top: 8px; /* Body margin wasn't set correctly in the CodePen */ 
    position : absolute; 
    height:500px; 
    width: 500px; 
    opacity:0.5; 
}

以下是我如何与西西里岛地区合作，由您完成Provi全部清单的例子NCE代码：

var provinces ={"IT-82": ["TP","PA","AG","CL","EN","ME","CT","RG","SR"]}; 

$('#map-provinces').vectorMap({ 
    map: 'it_mill' 
}); 
$('#map-regions').vectorMap({ 
    map: 'it_regions_mill', 
    backgroundColor : 'white', 
    zoomOnScroll : false, 
    zoomMin : 0, 
    zoomMax :220, 
    regionStyle :{ 
    initial: { 
     fill: 'blue', 
     "fill-opacity": 1, 
     stroke: 'none', 
     "stroke-width": 0, 
     "stroke-opacity": 1 
    }, 
    hover: { 
     "fill-opacity": 1, 
     cursor: 'pointer' 
    }, 
    selected: { 
     fill: 'blue', 
     "fill-opacity": 1, 
    }, 
    selectedHover: { 
     "fill-opacity": 1, 
     cursor: 'pointer' 
    } 
    }, 
    onRegionClick: function(e, code, isSelected, selectedRegions){ 
    var codes = []; 
    provinces[code].forEach(function(province) { 
     codes.push("IT-"+province); 
    }); 
    $('#map-regions').vectorMap('get','mapObject').setFocus({region: code}); 
    $('#map-provinces').vectorMap('get', 'mapObject').setFocus({regions: codes}); 
    } 
});

维特考虑到这一点，你可以很容易地实现所提供的jVectorMap网站上钻取的样品，并且对区域点击变焦后两个地图上正确对齐，就像在下面，在这张照片两个重叠的地图显示，就像你在你的CodePen做到了：

来源

2017-03-02 12:20:46 deblocker

哇感谢的人其看起来不错，只是多了一个问题，如果我缩小了第一张地图的第二地图（省）不会放大出。所以有一种方法可以在这两个地图上绑定缩放按钮？ –

是的，当然，但这将是另一个问题，如何同步两个重叠地图的“视口”......此外，在您关注某个地区之后，您需要交换地图，以便省份将成为当前前景地图，你可以点击它。你同意？ – deblocker

耶，这将是一个很好的功能，我试图做一些尝试，可能我可以发布链接到其他问题在这里？ –

jvectormap合并两个地图

回答

相关问题