如何实现点击JVectorMap中不同MENA国家时，Shadowbox展示对应专属内容？

要实现点击不同国家展示对应专属内容，核心是建立国家代码与内容的关联映射，步骤如下：

1. 创建国家内容映射对象
   定义一个对象，键是国家代码（比如'SA'），值包含该国家对应的弹窗内容和标题，这样能快速根据点击的代码匹配到专属信息。

2. 在点击事件中动态获取内容
   在onRegionClick回调里，通过当前点击的国家代码，从映射对象中取出对应的内容和标题，替换到Shadowbox的配置参数中。

修改后的完整代码 #

<div id="world-map" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
  $(function(){
    // MENA区域国家代码
    var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'];
    
    // 国家专属内容映射：键为国家代码，值包含内容和标题
    var countryContent = {
      'DZ': {
        title: '阿尔及利亚',
        content: '<p style="color: white; font-size: 16px;">阿尔及利亚的专属信息...</p>'
      },
      'EG': {
        title: '埃及',
        content: '<p style="color: white; font-size: 16px;">埃及的专属信息...</p>'
      },
      'SA': {
        title: '沙特阿拉伯',
        content: '<p style="color: white; font-size: 16px;">沙特阿拉伯的专属信息...</p>'
      },
      // 其他MENA国家依次补充专属内容即可
      'YE': {
        title: '也门',
        content: '<p style="color: white; font-size: 16px;">也门的专属信息...</p>'
      }
    };

    $('#world-map').vectorMap({
      map: 'world_mill_en',
      zoomMax: 20,
      backgroundColor: '#505050',
      regionStyle: {
        initial: {
          fill: '#F6F5F4'
        },
        hover: {
          fill: '#F6F5F4',
          "fill-opacity": 1
        },
        selected: {
          fill: '#7B8B9B'
        },
        selectedHover: {
          cursor: 'pointer',
          fill: '#002142'
        }
      },
      selectedRegions: codes,
      onRegionClick: function (event, code) {
        if($.inArray(code,codes) > -1) {
          // 根据国家代码获取对应的内容和标题
          var targetContent = countryContent[code];
          Shadowbox.open({ 
            content: targetContent.content,
            player: "html",
            title: targetContent.title,
            height: 400,
            width: 640
          });
        }
      }
    });
  });
</script>

内容的提问来源于stack exchange，提问作者OverdueOrange