在Jvectormap中切换地图？ [英] Switch maps in Jvectormap?
本文介绍了在Jvectormap中切换地图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使用Jvectormap在地图之间切换。
目前我有两个div，一个世界地图和一个us-map。美国地图是隐藏的。当有人在世界地图上点击美国时，世界地图div将关闭，美国地图打开，效果很好。在显示美国地图时，我还会看到一个按钮，旨在将用户带回世界地图。但是，点击时显示两张世界地图。我确信我正在做一些根本性的错误，但可以找到关于此的任何文档。我会认为这是一件普通的事情要做。
任何指针都会很棒。
DIVS和后退按钮图片：
< table width =900cellpadding =0 cellspacing =0align =center>
< tr>
< td align =left>< img src =images / titletext.png>< / td>
< td align =right>< img src =images / backtoworld.pngborder =0id =backtoworldstyle =display：none;的onClick = showworldmap（） >< / TD>
< / tr>
< / table>
< / td>
< / tr>
< Tr>
< Td align =center>
< div id =world-mapstyle =display：block;>< / div>
< div id =us-mapstyle =display：none;>< / div>
JQuery / JavaScript：
function showusmap（）{
document.getElementById（world-map）。style.display ='none';
document.getElementById（us-map）。style.display ='block';
document.getElementById（backtoworld）。style.display ='block';
openusmap（）
}
函数openusmap（）{
$（'＃us-map'）。vectorMap（{
map：us_aea_en，
normalizeFunction：'polynomial'，
backgroundColor：'transparent'，
regionStyle：{
initial：{
fill： '＃128da7'，
}}，
onRegionClick：function（event，code）{
// if（code ==US）{showmap（'us_aea_en'）}
$，
系列：{
地区：[{
values：{
US-CA：'＃006633'，
US-IL：'＃006633'，
US-IN：'＃006633'，
US-DC：'＃006633'，
US -WA：'＃006633'，
US-FL：'＃006633'，
'US-TX'：'＃006633'，
'US-OR'：' ＃006633'，
US-OH：'＃006633'，
US-MS：'＃006633'，
U S-OK：'＃006633'，
US-MI：'＃006633'，
US-PA：'＃006633'，
US-NY： '＃006633'，
US-MN：'＃006633'，
'US-NC'：'＃006633'，
'US-GA'：'＃006633'，
US-AL：'＃006633'，
US-VA：'＃006633'，
US-VT：'＃006633'，
US-CT：'＃006633'，
US-MO：'＃006633'，
US-AZ：'＃006633'，
US-NJ： '＃006633'，
}
}]
}
}）
}
function showworldmap（）{
document.getElementById（us-map）。style.display ='none';
document.getElementById（world-map）。style.display ='block';
document.getElementById（backtoworld）。style.display ='none';
openworldmap（）
}
函数openworldmap（）{
$（'＃world-map'）。vectorMap（{
map：world_mill_en，
normalizeFunction：'polynomial'，
backgroundColor：'transparent'，
regionStyle：{
initial：{
fill： '＃128da7'
}}，
onRegionClick：function（event，code）{
if（code ==US）{showusmap（）}
}，
系列：{
地区：[{
values：{
CZ：'＃006633'，
FR：'＃006633'，
IT：'＃006633'，
NL：'＃006633'，
美国：'＃006633'，
CH：'＃006633'，
NO： '＃006633'，
SE： ＃006633'，
FI：'＃006633'，
AT：'＃006633'，
GR：'＃006633'，
CY：'＃006633'，
AU：'＃006633'，
BE：'＃006633'，
HU：'＃006633'，
GB：'＃006633'，
ZA：'＃ 006633'，
BR：'＃006633'，
CA：'＃006633'，
MX：'＃006633'，
PR：'＃006633'，
IL：'＃006633'，
PK：'＃006633'，
MY：'＃006633'，
JP：'＃006633'，
}
}]
}
}）;
解决方案
建议并在显示它之后在地图容器上触发resize（）。然后在你看到它之前缩放（至少如果你淡入）。
var $ container = $（'＃ yourHiddenMap'）;
map = new jvm.WorldMap（{
container：$ container，
map：...
}）;
$（'＃yourSwitchButton'）。click（function（）{
$ container.fadeIn（）。resize（）;
}）;
I'm trying to switch between maps using Jvectormap.
Currently I have two divs, one "world-map" and one "us-map". The US Map is hidden. When someone clicks on the USA on the world map the world map div closes and the US map opens, works nicely.
On showing the US map I also reveal a button that is designed to take the user back to the world map. However, when this is clicked it shows TWO world maps. I'm sure I'm doing something fundamentally wrong but can' find any documentation on this. I would have thought this was a common thing to want to do.
Any pointers would be great.
DIVS and Back button image:
<table width="900" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="left"><img src="images/titletext.png"></td>
<td align="right"><img src="images/backtoworld.png" border="0" id="backtoworld" style="display:none;" onClick="showworldmap()"></td>
</tr>
</table>
</td>
</tr>
<Tr>
<Td align="center">
<div id="world-map" style="display:block;"></div>
<div id="us-map" style="display:none;"></div>
JQuery/JavaScript:
function showusmap() {
document.getElementById("world-map").style.display = 'none';
document.getElementById("us-map").style.display = 'block';
document.getElementById("backtoworld").style.display = 'block';
openusmap()
}
function openusmap() {
$('#us-map').vectorMap({
map: "us_aea_en",
normalizeFunction: 'polynomial',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: '#128da7',
}},
onRegionClick: function(event, code){
// if (code == "US") { showmap('us_aea_en') }
},
series: {
regions: [{
values: {
"US-CA":'#006633',
"US-IL":'#006633',
"US-IN":'#006633',
"US-DC":'#006633',
"US-WA":'#006633',
"US-FL":'#006633',
"US-TX":'#006633',
"US-OR":'#006633',
"US-OH":'#006633',
"US-MS":'#006633',
"US-OK":'#006633',
"US-MI":'#006633',
"US-PA":'#006633',
"US-NY":'#006633',
"US-MN":'#006633',
"US-NC":'#006633',
"US-GA":'#006633',
"US-AL":'#006633',
"US-VA":'#006633',
"US-VT":'#006633',
"US-CT":'#006633',
"US-MO":'#006633',
"US-AZ":'#006633',
"US-NJ":'#006633',
}
}]
}
})
}
function showworldmap() {
document.getElementById("us-map").style.display = 'none';
document.getElementById("world-map").style.display = 'block';
document.getElementById("backtoworld").style.display = 'none';
openworldmap()
}
function openworldmap() {
$('#world-map').vectorMap({
map: "world_mill_en",
normalizeFunction: 'polynomial',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: '#128da7'
}},
onRegionClick: function(event, code){
if (code == "US") { showusmap() }
},
series: {
regions: [{
values: {
CZ:'#006633',
FR:'#006633',
IT:'#006633',
NL:'#006633',
US:'#006633',
CH:'#006633',
NO:'#006633',
SE:'#006633',
FI:'#006633',
AT:'#006633',
GR:'#006633',
CY:'#006633',
AU:'#006633',
BE:'#006633',
HU:'#006633',
GB:'#006633',
ZA:'#006633',
BR:'#006633',
CA:'#006633',
MX:'#006633',
PR:'#006633',
IL:'#006633',
PK:'#006633',
MY:'#006633',
JP:'#006633',
}
}]
}
});
}
解决方案
You can do what Alex Williams suggested and trigger a resize() on the Map container after showing it. Then it gets scaled before you can see it (at least if you fade in).
var $container = $('#yourHiddenMap');
map = new jvm.WorldMap({
container: $container,
map: ...
});
$('#yourSwitchButton').click(function() {
$container.fadeIn().resize();
});
这篇关于在Jvectormap中切换地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
