传单绘制瓷砖不相交

IT技术 javascript leaflet
2021-01-12 16:24:35

我正在实例化一个传单地图，但图块基本上散布在整个页面上 - 虽然地图在一个 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 的边界内，但不是其余的。你可以看到这里发生的事情的截图：

杂乱的瓷砖截图

3个回答

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

我正在使用 Polymer 2 和传单，似乎没有发现任何 CSS 问题。这是我在 SO 中的帖子：stackoverflow.com/questions/53872322/...。希望你能帮忙。
2021-04-02 16:24:35
arg... 在 smarty 模板中遗漏了一行。谢谢指点，一切都解决了。
2021-04-03 16:24:35
什么文件丢失了？
2021-04-08 16:24:35

正如已经指出的，这是通过导入 CSS 文件来解决的。

通常，您在文档的 head 部分包含指向 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;
    }

所以知道你可以在项目中的任何一点插入它们适合你的风格。

说得对，但是 OP 的问题在三年半前就解决了。认为值得分享我需要的具体解决方案！
2021-03-29 16:24:35
注意：在 JS 中导入 CSS 文件特定于您的构建引擎（通常是 webpack）。在这种情况下，OP 似乎没有使用任何。
2021-04-06 16:24:35

将这些添加到您的 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>
其它你可能感兴趣的问题
上一篇如何在react渲染功能中异步等待？ 下一篇为什么我在 node.js 中使用 parseInt 会得到奇怪的结果？（与 chrome js 控制台不同的结果）