Leaflet绘制瓦片不连续

Question

我正在实例化一个leaflet地图，但是瓦片基本上散布在整个页面上 - 虽然地图位于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>

JavaScript的作用如下：

mapOptions = {
               attributionControl: true,
               center: {
                   lat: 38.573955
                   lng: -121.442478
               },
               centerpoint: "38.573955,-121.442478", 
               layers: {},
               maptype: "Terrain", 
               scrollWheelZoom: false, 
               zoom: 8
            }

var map = L.map( "Map_5333811_16", mapOptions );

什么会导致瓷砖乱成一团？其中一些瓷砖在 div 的边界内，但其他瓷砖不在。您可以在此处查看屏幕截图：

- Andy Wallace

Answer 1

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

- ghybs

---

arg...在smarty模板中漏掉了一行。感谢您的指点，这解决了所有问题。 - Andy Wallace

我正在使用Polymer 2和leaflet，似乎没有发现任何CSS问题。这是我在SO上的帖子：stackoverflow.com/questions/53872322/。希望你能帮忙。 - sd1517

缺少哪个文件？ - HazeyAce

Answer 2

正如所指出的那样，这可以通过导入CSS文件来解决。

传统上，在文档的头部添加CSS样式表链接：

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

或者，就像我的情况一样，在使用Vue CLI的Webpack模板时，通过添加

import "leaflet/dist/leaflet.css";

把代码添加到 main.js 文件中。

---

CSS 中关键的行似乎是这些：

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

因此，知道您可以在项目的任何适合您风格的点插入它们。

- Peter Prescott

---

注意：在JS中导入CSS文件是特定于您的构建引擎（通常是webpack）的。在这种情况下，OP似乎没有使用任何构建引擎。 - ghybs

有道理，但是原帖的问题已经在三年半前解决了。我认为分享我所需要的具体解决方案还是值得的！ - Peter Prescott

Answer 3

将这些添加到您的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>

- Qiimiia