传单上画的瓦片不连贯

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>

爪哇语归结为：

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/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

或者，在我的例子中，在改编时偶然发现了这个问题。Vue CLI's Webpack模板，加入

import "leaflet/dist/leaflet.css";

进入 main.js 文件。

---

CSS的关键行似乎是这些。

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

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