jVectorMap 2.0.5版本在WordPress中无法渲染地图的问题求助

问题概述 #

静态HTML/JS环境中jVectorMap 2.0.5可正常运行，但在WordPress通过wp_enqueue_scripts引入资源后，地图无法渲染，控制台抛出错误：

<g> attribute transform: Expected number, "…le(0) translate(Infinity, 0)"
错误来自jquery-jvectormap-2.0.5.min.js，此前1.1.1版本在WordPress中可正常工作。

问题原因 #

该错误通常因地图初始化时容器尺寸计算为0，导致缩放逻辑出现无限值（Infinity），触发SVG属性解析失败。根源多为资源加载顺序错误、jQuery冲突、容器渲染时机问题或缺少必要CSS。

解决方案 #

1. 修正资源依赖与加载顺序

WordPress的脚本依赖必须严格对应，地图数据脚本需依赖核心jVectorMap脚本，自定义初始化脚本需依赖地图数据脚本，同时避免重复引入jQuery：

// 加载jVectorMap样式（静态环境中可能已引入，WordPress需手动添加）
wp_enqueue_style('jvectormap-css', plugin_dir_url(__FILE__) . 'assets/css/jquery-jvectormap-2.0.5.css', [], null);

// 使用WordPress自带jQuery，无需重复引入外部版本
wp_enqueue_script('jvectormap-jquery', plugin_dir_url(__FILE__) . 'assets/js/jquery-jvectormap-2.0.5.min.js', ['jquery'], null, true);
// 地图数据脚本依赖核心jVectorMap脚本
wp_enqueue_script('jvectormap-world-mill', plugin_dir_url(__FILE__) . 'assets/js/jquery-jvectormap-world-mill.js', ['jvectormap-jquery'], null, true);
// 自定义初始化脚本依赖地图数据脚本
wp_enqueue_script('wmq-world-map', plugin_dir_url(__FILE__) . 'assets/js/wmq-world-map.js', ['jvectormap-world-mill'], null, true);
wp_enqueue_script('wmq-quiz', plugin_dir_url(__FILE__) . 'assets/js/quiz.js', ['jquery'], null, true);

2. 确保容器尺寸初始化时机正确

改用window.load替代document.ready，确保页面所有元素（包括样式）渲染完成后再初始化地图，同时添加尺寸检查：

(function ($) {
  $(window).on('load', function(){
    const $mapContainer = $('#map');
    // 强制确保容器有明确尺寸，避免主题样式覆盖
    $mapContainer.css({
      width: '950px',
      height: '450px',
      display: 'block' // 防止容器被设置为inline导致尺寸计算异常
    });

    $mapContainer.vectorMap({
      map: "world_mill",
      backgroundColor: "#809fff",
      zoomOnScroll: false,
      regionStyle: {
        initial: {
          stroke: "black",
          "stroke-width": 0.3,
          fill: "#fff",
        },
        hover: {
          fill: "#ddd",
          "fill-opacity": 1,
        },
      },
      series: {
        regions: [
          {
            attribute: "fill",
          },
        ],
      }
    });
  });
})(jQuery);

3. 排查主题样式冲突

检查WordPress主题是否有CSS规则覆盖了#map容器的宽高或display属性，可通过浏览器开发者工具查看容器的实际计算尺寸，必要时给容器添加更具体的选择器或!important强制生效：

#mapWrapper #map {
  width: 950px !important;
  height: 450px !important;
  display: block !important;
}

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