传单单独绘制瓷砖

Question

我正在实例化一个传单地图,但是这些图块基本上遍布整个页面 - 而地图在一个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的范围内,但不是其余的.你可以看到这里发生的事情的截图:

Answer 1

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

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;
    }

因此知道您可以将它们插入到项目中适合您风格的任何位置。