我发现了一个我无法自己解决的问题。我只想渲染一个 jsvectormap,所以奇怪的是当它渲染时它太小了。
除此之外,网站本身还有一个大黑 block 。此外,当我将网站滚动到 200% 然后向后滚动时,它就会变成正常大小。也很奇怪的是,我从我元素的另一个 Blade 服务器中完全复制了它。
从这篇文章来看问题似乎是这样的: jVectorMap renders too small但我从那里的提示中找不到解决方案。
我非常接近取消矢量图,我对此没有问题,但我现在非常渴望解决这个问题!
我非常感谢一些提示,因为我没有找到正确的解决方案。非常感谢您提前
我试过了:
使用 .updateSize();更改 map 的实际大小,但前提是我使用了那么多次,比如在 for.黑 block 甚至在那里。
之后的其他 JQuery 函数,如 .width() .height() .css()m - 没有任何作用
从另一个 Blade 复制代码 1:1 所以我不认为这是因为 css
我尝试了这篇文章中的所有解决方案:jVectorMap renders too small
我的代码:
<script src="{{ asset('js/plugins/jvectormap/dist/jquery-jvectormap.min.js') }}"> </script>
<script src="{{ asset('js/plugins/jvectormap/maps/jquery-jvectormap-world-mill-en.js') }}"> </script>
<script src="{{ asset('js/jquery_vector_map.js') }}"></script>
<link rel="stylesheet" href="{{ 'js/plugins/jvectormap/dist/jquery-jvectormap.css' }}">
<!-- World Map -->
<div class="col-xl-12 js-appear-enabled animated fadeIn" data-toggle="appear" data-timeout="800">
<div class="block block-rounded block-bordered">
<div class="block-header block-header-default">
<h3 class="block-title">Studies - <small> {{ date("F", strtotime("this month")) }} </small> </h3>
<div class="block-options">
<button type="button" class="btn-block-option">
<i class="si si-settings"></i>
</button>
</div>
</div>
<div class="block-content block-content-full">
<!-- World Map Container -->
<div id="world-map-studies" class="js-vector-map-world" style="height: 500px;"></div>
</div>
</div>
</div>
<!-- END World Map -->
最佳答案
有趣的是,我使用它的方式非常相似,在我的例子中它呈现正确。你试过哪个浏览器?您不是在带有 Retina 显示屏或某些超高分辨率的设备上尝试吗?
您可以尝试我的实现,如果这对您来说没问题:https://sevenhillsaway.com/map/
我知道我也在和它作斗争。如果我记得设置高度也对我有帮助......也许其他一些 Divs 在设计中影响它?
关于javascript - jsVectorMap 渲染得太小并破坏了布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55413961/