jVectorMap最新版本(2.0.5)与WordPress不能正常工作

Question

在静态HTML, JS和JQuery上，他们的解决方案工作得很好，如文档https://jvectormap.com/maps/world/world/但当我尝试使用WordPress并使用wp_enqueue_scripts钩子来获取CSS和JS的资产时。地图没有渲染。给我控制台错误，这似乎是不可理解的

错误:& lt; g>属性转换:期望数"…le(0) translate(Infinity, 0)"在文件"jquery-jvectormap-2.0.5.min.js">

(function ($) {
$(document).ready(function(){
// $('#map').vectorMap({map: 'world_mill'});
$('#map').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);

wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js', '', null, true);
wp_enqueue_script('jvectormap-jquery', plugin_dir_url(__FILE__) . 'assets/js/jquery-jvectormap-2.0.5.min.js', ['jquery'], null, true);
wp_enqueue_script('jvectormap-world-mill', plugin_dir_url(__FILE__) . 'assets/js/jquery-jvectormap-world-mill.js', ['jquery'], null, true);
wp_enqueue_script('wmq-world-map', plugin_dir_url(__FILE__) . 'assets/js/wmq-world-map.js', ['jquery'], null, true);
wp_enqueue_script('wmq-quiz', plugin_dir_url(__FILE__) . 'assets/js/quiz.js', ['jquery'], null, true);

<div id="mapWrapper" style="
text-align: center;
position: relative;
">
<div id="points" style="z-index: 2; position: relative"></div>
<div id="map" style="width: 950px; height: 450px"></div>
</div>

我使用了早期版本的jVectorMap 1.1.1和一些来自互联网的资源，它在wordPress上工作得很好，但文档基于更新的资源。

如有任何帮助，我将不胜感激。

Answer 1

尝试检查您的元素。svg元素的高度必须为:0。试着在inspect元素本身中给它设置一些高度(例如:chrome浏览器)。如果在给vectorMap svg高度之后，如果它是可见的，那么给一些静态高度。应该可以。