幸いにも、偉大なjVectorMapは複数の地域に焦点を当てているので、必要なのは地域と地域の関連付けを作成してその機能を2回呼び出すことです。
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コード:心の中で、あなたは簡単に、jVectorMapのウェブサイト上で提供ドリルダウンサンプルを実装し、両方のマップが正しく領域クリックでズームした後に整列してい、下のこの絵のようにできることを
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});
}
});
聖霊降臨祭あなたはCodePenでそれをやったように、両方の重複マップが表示されます:私は最初のマップに第2のマップをズームアウトした場合
素晴らしい、もう一つだけ質問そのルックスの男のおかげすごい、(州)はズームインしません。でる。だから両方のマップにズームボタンをバインドする方法がありますか? –
はい、もちろんですが、これはもう一つの質問です.2つの重なったマップの 'viewport'を同期させる方法...さらに、ある地域に焦点を当てた後、地方を現在のものにするために地図を交換する必要があります前景の地図をクリックしてください。あなたが同意する? – deblocker
これは素晴らしい機能になるでしょう、私はいくつかの試みをしようとしています、おそらく私はここに他の質問へのリンクを投稿することができますか? –