Javascript 图纸单张

我正在实例化一个传单地图，但是图块基本上分散在整个页面上-虽然地图在一个div中，但大多数图块都不遵守该边界：

<div class="widget-content listing-search-map-widget-content">
    <div class="ih-map" 
         id="Map_5333811_16"
         style="height:450px;"
         data-centerpoint="38.573955 -121.442478" 
         data-mousewheel="true" 
         data-maptype="TERRAIN"
         data-zoom="8"
        >
    </div>
</div>

什么会导致这些图块在整个位置上绘制？有几个图块在div的范围内，但其余的图块不在范围内。您可以看到此处发生的情况的屏幕截图：

---

这听起来像是缺少传单CSS文件的症状，或者该文件的版本不正确。

如前所述，这可以通过导入CSS文件来解决

通常，在文档的标题部分包含指向CSS样式表的链接：

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

进入

main.js

文件

---

CSS的关键行似乎是：

.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
    }

---

因此，您可以在项目中适合自己风格的任何位置插入它们。

将它们添加到index.html中

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>


<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
          integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
          crossorigin=""></script>

arg。。。在smarty模板中遗漏了一行。谢谢你的指点，这一切都解决了。我用传单聚合物2，似乎没有发现任何CSS问题。这是我在SO:stackoverflow.com/questions/53872322/上的帖子…。希望您能提供帮助。缺少什么文件？注意：在JS中导入CSS文件是特定于您的构建引擎（通常是网页包）的。在这种情况下，OP似乎没有使用任何。公平点，但OP的问题在三年半前就解决了。认为值得分享我需要的具体解决方案！

.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
    }

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>


<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
          integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
          crossorigin=""></script>