javascript - jvectormap 合并两个 map

Question

我正在尝试合并两个 jvectormap:italy-regions和 italy-provinces ， 我 想要实现类似于drill-down example的东西或者甚至只是将 map 分为地区和省份。
我认为我不能像演示中那样使用 multimap 因为 italy-provinces map 只是一个包含所有省份的脚本，因此主要功能是检索每个地区的 map 没用:

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

在此pen我已经重现了与我想要实现的目标类似的东西。
显然这个解决方案非常糟糕，因为我使用了两个 map ，一旦我单击第一个 map 的随机区域，第二个 map 将不会缩放，因此两个 map 看起来不同步。 有人知道或可以建议一种方法来实现我的需要吗？

Answer 1

幸运的是，伟大的 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 网站上提供的向下钻取示例，并在单击区域缩放后正确对齐两个 map ，如下图所示，其中显示了两个重叠的 map ，例如你在 CodePen 中做到了: