Question

我发现自己无法解决的问题。我只想渲染jsvectormap，所以奇怪的是，渲染时它太小了。

此外，网站本身还有一个大黑块。另外，当我将网站滚动到200％，然后向后滚动时，它的大小也就正常了。而且很奇怪的是，我从项目的另一个刀片完全复制了它。

看起来像这篇文章中的问题： jVectorMap renders too small，但我发现那里的提示没有解决方案。

我非常接近取消矢量地图，对此我没有任何问题，但是我现在非常渴望解决这个问题！

我非常感谢一些提示，因为我没有找到正确的解决方案。预先非常感谢

我尝试过：

使用.updateSize（）;更改地图的实际大小，但前提是我使用了多次，例如for。黑块甚至在那里。
之后的其他JQuery函数，例如.width（）.height（）.css（）m-无效
从另一个刀片中复制了代码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 -->

Answer 1

有趣的是，我使用它的方式非常相似，在我看来，它可以正确呈现。您尝试过哪种浏览器？您不是要在具有Retina显示屏或高分辨率的设备上尝试吗？

如果可以，请尝试我的实施：https://sevenhillsaway.com/map/

我知道我也在和它战斗。如果我记得设置高度也对我有帮助。...也许其他Divs正在影响设计？

jsVectorMap渲染得太小，破坏了布局

1 个答案: