javascript - Jvectormap show div onRegionClick

Question

您好，我目前正在尝试使用 Jvectormap 插件，我发现它非常好，但是我无法创建这一点功能，这会让它变得惊人......

我需要的是当您单击区域文本以显示在右侧的预定义 div 中时。

正如您在图片中看到的，当您单击英国文本时，我希望它显示在右侧的黑框中。

然而，我所做的只是使该区域成为一个链接。

这是一个链接 http://s453688288.websitehome.co.uk/wndirect/destination.php

这是我的代码

<p>Click on the links below to see some key stats regarding eCommerce in that country.</p>
    </div>
</div>

<div class="green-band">
<div class="row">
    <div class="three columns">  
  <button id="focus-eu">Focus on Europe</button>
  </div>
  <div class="three columns">  
  <button id="focus-us">Focus on USA</button>
  </div>
  <div class="three columns">  
  <button id="focus-au">Focus on Australia</button>
  </div>
  <div class="three columns">  
  <button id="focus-home">Return to the initial state</button>
  </div>
</div>
</div><!-- end green band -->

<div id="map1">

<div class="info-box"><h3 class="white">Ecommerce info</h3></div>

<div class="footer-illustration-map"></div>

</div><!-- end #map1 -->


<? include("inc/footer.php") ?>

<!-- map functionality-->
<link rel="stylesheet" media="all" href="maps/jquery-jvectormap.css"/>
  <script src="maps/jquery-jvectormap.js"></script>
  <script src="maps/jquery-mousewheel.js"></script>

  <script src="maps/lib/jvectormap.js"></script>

  <script src="maps/lib/abstract-element.js"></script>
  <script src="maps/lib/abstract-canvas-element.js"></script>
  <script src="maps/lib/abstract-shape-element.js"></script>

  <script src="maps/lib/svg-element.js"></script>
  <script src="maps/lib/svg-group-element.js"></script>
  <script src="maps/lib/svg-canvas-element.js"></script>
  <script src="maps/lib/svg-shape-element.js"></script>
  <script src="maps/lib/svg-path-element.js"></script>
  <script src="maps/lib/svg-circle-element.js"></script>

  <script src="maps/lib/vml-element.js"></script>
  <script src="maps/lib/vml-group-element.js"></script>
  <script src="maps/lib/vml-canvas-element.js"></script>
  <script src="maps/lib/vml-shape-element.js"></script>
  <script src="maps/lib/vml-path-element.js"></script>
  <script src="maps/lib/vml-circle-element.js"></script>

  <script src="maps/lib/vector-canvas.js"></script>
  <script src="maps/lib/simple-scale.js"></script>
  <script src="maps/lib/numeric-scale.js"></script>
  <script src="maps/lib/ordinal-scale.js"></script>
  <script src="maps/lib/color-scale.js"></script>
  <script src="maps/lib/data-series.js"></script>
  <script src="maps/lib/proj.js"></script>
  <script src="maps/lib/world-map.js"></script>

  <script src="maps/tests/assets/jquery-jvectormap-world-mill-en.js"></script>

 <script>


    jQuery.noConflict();
    jQuery(function(){
      var $ = jQuery;

      $('#focus-au').click(function(){
        $('#map1').vectorMap('set', 'focus', 'AU');
      });
      $('#focus-us').click(function(){
        $('#map1').vectorMap('set', 'focus', 3, 0.1, 0.4);
      });
      $('#focus-eu').click(function(){
        $('#map1').vectorMap('set', 'focus', 3, 0.5, 0.3);
      });
      $('#focus-home').click(function(){
        $('#map1').vectorMap('set', 'focus', 1, 0, 0);
      });
      $('#map1').vectorMap({
        map: 'world_mill_en',

        focusOn: {
          x: 0.5,
          y: 0.5,
          scale: 1
        },

        backgroundColor: '#FFFFFF',

        onRegionClick: function(event, code){
                        if (code == "GB") {window.location = '#reach'}
                        if (code == "US") {label.text('Bears, vodka, balalaika');}
                        if (code == "DE") {window.location = '/url4'}
                        if (code == "IE") {window.location = '/url5'}
},

        series: {

          regions: [{
            scale: ['#A6CDD4', '#669ca5'],
            normalizeFunction: 'polynomial',
            values: {
              "GL": 0,
              "AF": 0,
              "AL": 0,
              "DZ": 0,
              "AO": 0,
              "AG": 0,
              "AR": 0,
              "AM": 0,
              "AU": 1,
              "AT": 1,
              "AZ": 0,
              "BS": 0,
              "BH": 0,
              "BD": 0,
              "BB": 0,
              "BY": 0,
              "BE": 0,
              "BZ": 0,
              "BJ": 0,
              "BT": 0,
              "BO": 0,
              "BA": 0,
              "BW": 0,
              "BR": 0,
              "BN": 0,
              "BG": 0,
              "BF": 0,
              "BI": 0,
              "KH": 0,
              "CM": 0,
              "CA": 1,
              "CV": 0,
              "CF": 0,
              "TD": 0,
              "CL": 0,
              "CN": 0,
              "CO": 0,
              "KM": 0,
              "CD": 0,
              "CG": 0,
              "CR": 0,
              "CI": 0,
              "HR": 0,
              "CY": 1,
              "CZ": 1,
              "DK": 0,
              "DJ": 0,
              "DM": 0,
              "DO": 0,
              "EC": 0,
              "EG": 0,
              "SV": 0,
              "GQ": 0,
              "ER": 0,
              "EE": 1,
              "ET": 0,
              "FJ": 0,
              "FI": 0,
              "FR": 1,
              "GA": 0,
              "GM": 0,
              "GE": 0,
              "DE": 1,
              "GH": 0,
              "GR": 0,
              "GD": 0,
              "GT": 0,
              "GN": 0,
              "GW": 0,
              "GY": 0,
              "HT": 0,
              "HN": 0,
              "HK": 0,
              "HU": 1,
              "IS": 0,
              "IN": 0,
              "ID": 0,
              "IR": 0,
              "IQ": 0,
              "IE": 1,
              "IL": 0,
              "IT": 1,
              "JM": 0,
              "JP": 0,
              "JO": 0,
              "KZ": 0,
              "KE": 0,
              "KI": 0,
              "KR": 0,
              "KW": 0,
              "KG": 0,
              "LA": 0,
              "LV": 0,
              "LB": 0,
              "LS": 0,
              "LR": 0,
              "LY": 0,
              "LT": 0,
              "LU": 1,
              "MK": 0,
              "MG": 0,
              "MW": 0,
              "MY": 0,
              "MV": 0,
              "ML": 0,
              "MT": 0,
              "MR": 0,
              "MU": 0,
              "MX": 0,
              "MD": 0,
              "MN": 0,
              "ME": 0,
              "MA": 0,
              "MZ": 0,
              "MM": 0,
              "NA": 0,
              "NP": 0,
              "NL": 1,
              "NZ": 1,
              "NI": 0,
              "NE": 0,
              "NG": 0,
              "NO": 0,
              "OM": 0,
              "PK": 0,
              "PA": 0,
              "PG": 0,
              "PY": 0,
              "PE": 0,
              "PH": 0,
              "PL": 1,
              "PT": 1,
              "QA": 0,
              "RO": 1,
              "RU": 0,
              "RW": 0,
              "WS": 0,
              "ST": 0,
              "SA": 0,
              "SN": 0,
              "RS": 0,
              "SC": 0,
              "SL": 0,
              "SG": 0,
              "SK": 0,
              "SI": 0,
              "SB": 0,
              "ZA": 0,
              "ES": 1,
              "LK": 0,
              "KN": 0,
              "LC": 1,
              "VC": 0,
              "SD": 0,
              "SR": 0,
              "SZ": 0,
              "SE": 0,
              "CH": 1,
              "SY": 0,
              "TW": 0,
              "TJ": 0,
              "TZ": 0,
              "TH": 0,
              "TL": 0,
              "TG": 0,
              "TO": 0,
              "TT": 0,
              "TN": 0,
              "TR": 0,
              "TM": 0,
              "UG": 0,
              "UA": 0,
              "AE": 0,
              "GB": 1,
              "US": 1,
              "UY": 0,
              "UZ": 0,
              "VU": 0,
              "VE": 0,
              "VN": 0,
              "YE": 0,
              "ZM": 0,
              "ZW": 0,
            }
          }]
        }
      });
    })
</script>

Answer 1

您需要获取 vectorMap mapObject ，并将其分配给一个变量:

var map = $('#map1').vectorMap('get', 'mapObject');

之后，您可以访问一个名为 getRegionName() 的方法, 将 code 传递给它.

然后将其附加到您的 <div> :

onRegionClick: function(event, code) {
  var map = $('#map1').vectorMap('get', 'mapObject');
  $('.info-box').append('<span>' + map.getRegionName(code) + '</span>');
}

(其中 .info-box 是您要附加到的 class 的 <div>)

Check out this jVectorMap commit