我一直在努力将jVectorMap onClick的国家/地区信息转换为另一个<div>。经过一些研究后，我发现我需要mapObject使用getRegionName，但我仍然无法使其工作（jQuery新手）。
基本上，我希望在点击国家/地区后在div信息框中看到国家/地区的名称。
这是地图的内容：
jQuery(function(){
var $ = jQuery;
$('#focus-au').click(function(){
$('#world-map').vectorMap('set', 'focus', 'AU');
});
$('#focus-us').click(function(){
$('#world-map').vectorMap('set', 'focus', 3, 0.1, 0.4);
});
$('#focus-eu').click(function(){
$('#world-map').vectorMap('set', 'focus', 3, 0.5, 0.3);
});
$('#focus-as').click(function(){
$('#world-map').vectorMap('set', 'focus', 2.5, 0.72, 0.0025);
});
$('#focus-home').click(function(){
$('#world-map').vectorMap('set', 'focus', 1, 0, 0);
});
$('#world-map').vectorMap({
map: 'world_mill_en',
focusOn: {
x: 0.5,
y: 0.5,
scale: 1
},
backgroundColor: '#FFFFFF',
onRegionClick: function(event, code) {
var map = $('#world-map').vectorMap('get', 'mapObject');
$('.info-box').html('<span>' + map.getRegionName(code) + '</span>');
},
series: {
regions: [{
values: clrData,
scale: ['#0071A4', '#C8EEFF'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function(e, el, code){
el.html(el.html()+' (Cost of Living and Rent Index - '+clrData[code]+')');
},
});
})
有div：
<div class="info-box"><h3>Info Box</h3></div>
最后信息框＆＃39; CSS（虽然我认为并不重要）：
.info-box {
line-height:30px;
background-color:#fff;
color: black;
height:300px;
width:100px;
float:left;
padding:5px;
}
同时它曾经突然发挥作用，但是在改变了CSS中的一些东西后（z-index和世界地图和侧边栏的位置相互重叠）它再次停止工作。
答案 0 :(得分：0)
我使用markers.html example中的初始化样式：
var map = new jvm.Map({
container: $('#map1'),
map: 'world_mill_en',
onRegionClick: function(event, code) {
$('.info-box').html('<h3>' + map.getRegionName(code) + '</h3>');
}
});
jQuery.noConflict();
jQuery(function() {
var $ = jQuery;
$('#focus-single').click(function() {
$('#map1').vectorMap('set', 'focus', {
region: 'AU',
animate: true
});
});
$('#focus-multiple').click(function() {
$('#map1').vectorMap('set', 'focus', {
regions: ['AU', 'JP'],
animate: true
});
});
$('#focus-coords').click(function() {
$('#map1').vectorMap('set', 'focus', {
scale: 7,
lat: 35,
lng: 33,
animate: true
});
});
$('#focus-init').click(function() {
$('#map1').vectorMap('set', 'focus', {
scale: 1,
x: 0.5,
y: 0.5,
animate: true
});
});
var map = new jvm.Map({
container: $('#map1'),
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 2,
animate: true
},
onRegionClick: function(event, code) {
//var map = $('#world-map').vectorMap('get', 'mapObject');
console.log(map.getRegionName(code));
$('.info-box').html('<h3>' + map.getRegionName(code) + '</h3>');
},
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
values: {
"AF": 16.63,
"AL": 11.58,
"DZ": 158.97,
"AO": 85.81,
"AG": 1.1,
"AR": 351.02,
"AM": 8.83,
"AU": 1219.72,
"AT": 366.26,
"AZ": 52.17,
"BS": 7.54,
"BH": 21.73,
"BD": 105.4,
"BB": 3.96,
"BY": 52.89,
"BE": 461.33,
"BZ": 1.43,
"BJ": 6.49,
"BT": 1.4,
"BO": 19.18,
"BA": 16.2,
"BW": 12.5,
"BR": 2023.53,
"BN": 11.96,
"BG": 44.84,
"BF": 8.67,
"BI": 1.47,
"KH": 11.36,
"CM": 21.88,
"CA": 1563.66,
"CV": 1.57,
"CF": 2.11,
"TD": 7.59,
"CL": 199.18,
"CN": 5745.13,
"CO": 283.11,
"KM": 0.56,
"CD": 12.6,
"CG": 11.88,
"CR": 35.02,
"CI": 22.38,
"HR": 59.92,
"CY": 22.75,
"CZ": 195.23,
"DK": 304.56,
"DJ": 1.14,
"DM": 0.38,
"DO": 50.87,
"EC": 61.49,
"EG": 216.83,
"SV": 21.8,
"GQ": 14.55,
"ER": 2.25,
"EE": 19.22,
"ET": 30.94,
"FJ": 3.15,
"FI": 231.98,
"FR": 2555.44,
"GA": 12.56,
"GM": 1.04,
"GE": 11.23,
"DE": 3305.9,
"GH": 18.06,
"GR": 305.01,
"GD": 0.65,
"GT": 40.77,
"GN": 4.34,
"GW": 0.83,
"GY": 2.2,
"HT": 6.5,
"HN": 15.34,
"HK": 226.49,
"HU": 132.28,
"IS": 12.77,
"IN": 1430.02,
"ID": 695.06,
"IR": 337.9,
"IQ": 84.14,
"IE": 204.14,
"IL": 201.25,
"IT": 2036.69,
"JM": 13.74,
"JP": 5390.9,
"JO": 27.13,
"KZ": 129.76,
"KE": 32.42,
"KI": 0.15,
"KR": 986.26,
"KW": 117.32,
"KG": 4.44,
"LA": 6.34,
"LV": 23.39,
"LB": 39.15,
"LS": 1.8,
"LR": 0.98,
"LY": 77.91,
"LT": 35.73,
"LU": 52.43,
"MK": 9.58,
"MG": 8.33,
"MW": 5.04,
"MY": 218.95,
"MV": 1.43,
"ML": 9.08,
"MT": 7.8,
"MR": 3.49,
"MU": 9.43,
"MX": 1004.04,
"MD": 5.36,
"MN": 5.81,
"ME": 3.88,
"MA": 91.7,
"MZ": 10.21,
"MM": 35.65,
"NA": 11.45,
"NP": 15.11,
"NL": 770.31,
"NZ": 138,
"NI": 6.38,
"NE": 5.6,
"NG": 206.66,
"NO": 413.51,
"OM": 53.78,
"PK": 174.79,
"PA": 27.2,
"PG": 8.81,
"PY": 17.17,
"PE": 153.55,
"PH": 189.06,
"PL": 438.88,
"PT": 223.7,
"QA": 126.52,
"RO": 158.39,
"RU": 1476.91,
"RW": 5.69,
"WS": 0.55,
"ST": 0.19,
"SA": 434.44,
"SN": 12.66,
"RS": 38.92,
"SC": 0.92,
"SL": 1.9,
"SG": 217.38,
"SK": 86.26,
"SI": 46.44,
"SB": 0.67,
"ZA": 354.41,
"ES": 1374.78,
"LK": 48.24,
"KN": 0.56,
"LC": 1,
"VC": 0.58,
"SD": 65.93,
"SR": 3.3,
"SZ": 3.17,
"SE": 444.59,
"CH": 522.44,
"SY": 59.63,
"TW": 426.98,
"TJ": 5.58,
"TZ": 22.43,
"TH": 312.61,
"TL": 0.62,
"TG": 3.07,
"TO": 0.3,
"TT": 21.2,
"TN": 43.86,
"TR": 729.05,
"TM": 0,
"UG": 17.12,
"UA": 136.56,
"AE": 239.65,
"GB": 2258.57,
"US": 14624.18,
"UY": 40.71,
"UZ": 37.72,
"VU": 0.72,
"VE": 285.21,
"VN": 101.99,
"YE": 30.02,
"ZM": 15.69,
"ZW": 5.57
}
}]
}
});
});<link rel="stylesheet" media="all" href="//rawgit.com/bjornd/jvectormap/master/jquery-jvectormap.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/jquery-jvectormap.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/lib/jquery-mousewheel.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/jvectormap.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/abstract-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/abstract-canvas-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/abstract-shape-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/svg-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/svg-group-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/svg-canvas-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/svg-shape-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/svg-path-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/svg-circle-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/svg-image-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/svg-text-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/vml-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/vml-group-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/vml-canvas-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/vml-shape-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/vml-path-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/vml-circle-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/vml-image-element.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/map-object.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/region.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/marker.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/vector-canvas.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/simple-scale.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/ordinal-scale.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/numeric-scale.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/color-scale.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/legend.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/data-series.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/proj.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/src/map.js"></script>
<script src="//rawgit.com/bjornd/jvectormap/master/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
<div class="info-box">
<h3>Info Box</h3>
</div>
<div id="map1" style="width: 600px; height: 400px"></div>
<button id="focus-single">Focus on Australia</button>
<button id="focus-multiple">Focus on Australia and Japan</button>
<button id="focus-coords">Focus on Cyprus</button>
<button id="focus-init">Return to the initial state</button>