Javascript jsVectorMap渲染太小,会破坏布局
我发现了一个我自己解决不了的问题。我只想渲染一个jsvectormap,所以奇怪的是当它渲染的时候它太小了。 除此之外,网站本身还有一个很大的黑块。另外,当我滚动到200%,然后向后,它是正常大小的网站。而且非常奇怪的是,我完全是从我的项目中的另一个刀片复制过来的。 这篇文章中的问题看起来很像: 但我没有从那里找到解决办法 我非常接近取消vectormap,我对此没有问题,但我现在非常渴望解决这个问题 我会非常感激一些提示,因为我没有找到正确的解决方案。事先非常感谢 我试过:Javascript jsVectorMap渲染太小,会破坏布局,javascript,css,laravel,jvectormap,Javascript,Css,Laravel,Jvectormap,我发现了一个我自己解决不了的问题。我只想渲染一个jsvectormap,所以奇怪的是当它渲染的时候它太小了。 除此之外,网站本身还有一个很大的黑块。另外,当我滚动到200%,然后向后,它是正常大小的网站。而且非常奇怪的是,我完全是从我的项目中的另一个刀片复制过来的。 这篇文章中的问题看起来很像: 但我没有从那里找到解决办法 我非常接近取消vectormap,我对此没有问题,但我现在非常渴望解决这个问题 我会非常感激一些提示,因为我没有找到正确的解决方案。事先非常感谢 我试过: <scr
<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 -->
<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 -->
研究{{日期(“F”,标准时间(“本月”)}
有趣的是,我使用它的方式非常相似,在我的例子中,它的渲染是正确的。你试过哪个浏览器?你不是在尝试用视网膜显示器或高分辨率的设备吗
您可以尝试我的实现,如果这对您来说是正确的:
我知道我也在和它斗争。如果我记得设置高度也帮助了我。。。。也许是其他一些div在设计中影响了它?谢谢你的帮助,但我检查了所有div。我只是把所有的东西都复制到它正常工作的地方。我也没有视网膜显示器,也没有高分辨率。我试过Chrome、Opera、Firefox和Edge。都一样。还有我链接的页面,你能正确地看到地图吗?因为如果是这样,还要检查jquery的版本。或者你有在线运行的地方,让我可以看看?