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();
});
I didn't download the vectorMap library. However, it appears that you are loading the widget onto $('#world-map') each time openusmap() is called. I would initialize the widget only once on both the US and the world maps and use JQuery's toggle function to hide and show the maps. Alternatively, you could use the widget's destroy method or some equivalent.
来源：https://stackoverflow.com/questions/14992196/switch-maps-in-jvectormap