我正在尝试使用Jvectormap在地图之间切换。
目前,我有两个div,一个是“world-map”,另一个是“us-map”。美国地图被隐藏起来。当有人点击世界地图上的美国时,世界地图div关闭,美国地图打开,效果很好。
在显示美国地图时,我还展示了一个按钮,旨在将用户带回世界地图。然而,当单击此按钮时,它会显示两个世界地图。我确定我做错了一些根本性的东西,但找不到任何文档。我认为这是一个常见的需求。
任何指针都将是很好的。
DIVS和返回按钮图片:
<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',
}
}]
}
});
}