在隐藏的div (wordpress)显示上重绘SVG地图

Question

我试图使用Wordpress中的一个名为"Interactive“的插件来设置一个响应性的SVG地图，但我希望只有在用户单击页面上的一个元素打开弹出以显示地图之后，地图才会显示出来。

当视口调整大小时，我使用的插件动态地重新绘制地图，如果弹出窗口(实际上只是一个带有框阴影的固定位置div )设置为在页面加载上显示，则可以很好地绘制地图，但出于某种原因，它绘制的地图要比按一下打开的div小得多。我希望它只在单击之后加载svg或短代码(并让它填充div)，或者从一开始就将映射设置为按适当大小加载。

我尝试过在px中将div设置为一个宽度，但这不起作用。不知道还能做什么。

Answer 1

我猜您的PHP插件正在生成JS代码，在页面加载后创建映射。

如果容器是可见的，它计算其尺寸并相应地设置映射的大小。

但是，如果容器是隐藏的弹出窗口，则由于两个可能的原因，它无法计算正确的尺寸：

• 容器由style.display = "none"隐藏:元素将具有0宽度和高度。映射看起来很小，因为它采用了默认的最小大小。
• 容器是由style.visibility = "hidden"或opacity: 0隐藏的(因此它有实际的尺寸)，但是它的初始大小很小；当它显示出来时，它就会增长，以适应页面。

检查插件的文档，看看是否可以调用生成地图的函数，而不是在页面加载时，而是在用户的事件下。取决于插件的API，它可以是简单的，也可以是繁琐的。

作为一种解决方法，由于映射适应于视图端口，因此在打开弹出窗口的click事件处理程序中触发调整大小。类似于：

var buttonThatOpensPopUp = document.getElementById( "buttonThatOpensPopUp" );
buttonThatOpensPopUp.addEventListener( function(){
  // here the code that opens popup...
  // then trigger resize
  window.dispatchEvent(new Event('resize'));
);