javascript - jVectorMap 以错误的大小渲染，并且似乎没有办法更改它

Question

我正在使用 jVectorMap 在 div 内创建 map 。

但是，无论我做什么， map 只占据 div 的一小部分。看来是由于<svg style="width: 100px; height: 100px;">

我尝试过在包含的div上设置大小，我尝试过各种CSS解决方案，但它仍然不允许我调整大小。背景颜色调整大小，但 SVG 元素却没有调整。

如何使用 jVectorMap 调整 SVG 元素的大小？

这是我的脚本:

<script>
$('#map').vectorMap({
 map: 'world_mill_en',
  regionsSelectable: 1,
  regionStyle: {
  initial: {
    fill: 'white',
    "fill-opacity": 1,
    stroke: 'none',
    "stroke-width": 0,
    "stroke-opacity": 1
  },
  hover: {
    "fill-opacity": 0.8
  },
  selected: {
    fill: 'blue'
  },
  selectedHover: {
  }
  }
});
</script>

Answer 1

同样的问题也发生在我身上，这正是你所说的，因为容器的宽度和高度设置为100%，但后来错误地评估为100px。

我在自定义 CSS 中将其更改为:

.jvectormap-container  { 
    width: inherited;  
    height: inherited;  
}

并且还更改了从第 2315 行开始的 jquery-jvectormap.2.0.2.js，以在函数 updateSize() 中获取容器的高度。 然后，我在 window.resize 事件中使用 javascript 设置容器的宽度和高度(以 px 为单位)。

本地图在辅助隐藏页面(例如在单页 Web 应用程序)中初始化时，您也可能会遇到此问题，因为计算出的宽度和高度尚无法访问。 希望这会有所帮助。