jvectormap 合并两个地图答案

【问题标题】：jvectormap merge two mapsjvectormap 合并两个地图
【发布时间】：2017-03-01 13:04:29
【问题描述】：

我正在尝试合并两个 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 中，我复制了一些类似于我想要实现的东西。
显然这个解决方案真的很糟糕，因为我使用了两张地图，一旦我点击第一张地图的随机区域，第二张地图就不会缩放，所以两张地图看起来不同步。有人知道或可以提出一种实现我需要的方法吗？

【问题讨论】：

标签： javascript jquery jvectormap

【解决方案1】：

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

我撤销了您的代码，以便在某种程度上更“明确”地说明 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 中完成的：

【讨论】：

哇，谢谢伙计，它看起来很棒，还有一个问题，如果我缩小第一张地图，第二张地图（省）将不会缩小。那么有一种方法可以绑定两个地图中的缩放按钮吗？
是的，当然，但这将是另一个问题，如何同步两个重叠地图的viewport...此外，在您聚焦一个区域后，您需要交换地图，这样省份就会成为当前的前景地图，你可以点击它。你同意吗？
是的，这将是一个不错的功能，我正在尝试做一些尝试，可能我可以在这里发布指向其他问题的链接吗？
即使你的答案是正确的，我也想出了一个更好的方法，不用指定省份，只同步两张地图。