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合併兩個地圖

回答

相關問題