无法将 jVectorMap 的 getRegionName 放入 div

Question

我整天都在尝试将国家/地区信息从 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>

最后是信息框的 CSS（虽然我认为这无关紧要）：

.info-box {
    line-height:30px;
    background-color:#fff;
    color: black;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}

与此同时，它突然工作了一次，但在更改了 CSS 中的一些内容（z-index 以及世界地图和侧边栏的位置，它们相互重叠）之后，它又停止了工作。

Answer 1

我使用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>