javascript - jvectormap合并两个 map

我正在尝试合并两个jvectormap：italy-regions和italy-provinces，我
希望实现与drill-down example类似的功能，甚至只是将地图分散到各个地区和省份。
我想我不能像演示中那样使用multimap，因为italy-provinces地图只是一个脚本，其中包含所有省份，因此用于检索每个区域的地图的主要功能是无用的：

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

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

最佳答案

幸运的是，出色的jVectorMap还支持集中于多个区域，因此您只需要在区域和省之间创建关联并两次调用该功能即可。

我重新修改了您的代码，以某种方式更“明确”地介绍省和地区：

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中：