jvectormap 合并两个地图

Question

我正在尝试合并两个 jvectormaps: italy-regions and italy-provinces, i 想实现类似于 drill-down example 的东西，甚至只是让地图在地区和省份都潜水。
我想我不能像演示中那样使用 multimap 因为 italy-provinces 地图只是一个包含所有省份的脚本，所以检索每个地区地图的主要功能是无用的：

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

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

Answer 1

幸运的是，jVectorMap 还支持关注多个区域，因此您只需要创建区域和省份之间的关联并调用该函数两次即可。

我修改了一些你的代码，在某种程度上更"explicit"关于Provinces和Regions:

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;
}

以下是我对西西里岛地区的处理方式，您可以使用整个省代码列表来完成此示例：

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 中所做的那样：

jvectormap 合并两个地图

jvectormap merge two maps

javascript

jquery

jvectormap