我正在实例化一个传单地图,但是这些图块基本上遍布整个页面 - 而地图位于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的范围内,但不是其余的。你可以看到这里发生的事情的截图:
答案 0 :(得分:15)
这听起来像是缺少Leaflet CSS文件或该文件版本不正确的症状。
答案 1 :(得分: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 template时遇到了这个问题import "leaflet/dist/leaflet.css";
进入main.js
文件。
CSS的关键内容如下:
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
因此知道您可以在项目中适合自己风格的任何位置插入它们。
答案 2 :(得分: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>