我发现了一个我自己无法解决的问题。我只是想渲染一个jsvectormap,所以奇怪的是它呈现的时候太小了。
除此之外,网站本身还有一个很大的黑块。此外,当我将网站滚动到200%然后向后滚动它然后是正常大小。我完全从我的项目中的另一个刀片中复制了它,这也很奇怪。
这看起来像这篇文章中的问题: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/
我知道我也在和它斗争。如果我记得设置高度也帮助了我......也许其他一些Div在设计中影响了它?