내가 두 jvectormaps을 병합하기 위해 노력하고있어 두지도

Question

병합 jvectormap.
나는 italy-provinces지도 내부의 모든 지방을 가진 하나의 스크립트이기 때문에 내가 데모 같은 multimap을 사용할 수 없습니다 생각, 그래서 각 지역의지도를 검색을위한 주요 기능은 쓸모가이 pen에서

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

전 내가 성취하려고하는 것과 비슷한 것을 재현했습니다.
분명히이 솔루션은 정말 좋지 않습니다. 두 개의 맵을 사용하고 있고 첫 번째 맵의 임의의 영역을 클릭하면 두 번째 맵이 확대되지 않으므로 두 맵이 동기화되지 않은 것처럼 보입니다. 누군가가 필요한 것을 성취 할 방법을 알고 있거나 제안 할 수 있습니까?

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

나는 약 지방 및 지역 더 "명시 적"어떤 방법으로 약간에게 코드를 revorked 다음은 시칠리아 지역과 함께하는 방법입니다.이 예를 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에서 그것을처럼 모두 중복 된지도는 표시됩니다 : 내가 처음지도를 두 번째지도를 축소하는 경우