在我问我的问题之前,我想说我是CSS的新手,而LeafLet的新手。
几个月前,我创建了一个html文件,该文件的左侧显示了地图的一部分,右侧显示了一些文本。地图提供者是Google Maps。
文件如下所示:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#root, html, body {
height: 98%;
font-family: sans-serif;
}
#map {
float: left;
width: 34.8%;
height: 100%;
overflow: visible;
}
#content {
float: right;
width: 65%;
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="root">
<div id="map"></div>
<div id="content">This is just a test This is just a test This is just a test</div>
</div>
<script>
function initMap() {
var nz = {lat: 51.5, lng: 0.0};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
scaleControl: true,
center: nz
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
自从Google更改了许可政策并在我的地图上显示“仅供开发用途”后,我考虑过更改地图提供程序并切换到OpenStreetMap和LeafLet。
因此,我拿走了旧文件,只更改了显示地图的代码。现在文件看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<style>
#root, html, body {
height: 98%;
font-family: sans-serif;
}
#map {
float: left;
width: 34.8%;
height: 100%;
overflow: visible;
}
#content {
float: right;
width: 65%;
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="root">
<div id="map"></div>
<div id="content">This is just a test This is just a test This is just a test</div>
</div>
<script>
//create map
var centerLat = 51.5;
var centerLon = 0.0;
var initialZoom = 8;
var map = L.map('map', {
center: [centerLat, centerLon],
zoom: initialZoom
});
var content = document.getElementById('content');
//set map tiles source
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '<a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>
但是,此LeafLet映射并不位于应显示在div元素的边界之内。
如果我用tileLayer
删除零件,则它会保留在div内,但不会显示地图。
谷歌搜索该问题仅发现有人说缺少CSS文件,但是我像LeafLet文档所说的那样包含LeafLet CSS文件(复制并粘贴,因此不可能出现错字)。
该地图不仅显示在其边界之外,如果我想更改用鼠标显示的地图部分(单击并拖动),那么整个div也会移动(或者是一个额外的图层?)。
即使单击并拖动,我该怎么做才能在边界内显示地图并将地图保持在边界内?
由于我不知道错误的确切原因,因此我添加了一些可能与问题无关的标签。
答案 0 :(得分:2)
您的#map CSS看起来像。
#map {
float: left;
width: 34.8%;
height: 100%;
overflow: visible;
}
删除显示“ overflow:visible”的行。那看起来还不错。
Codepen链接: https://codepen.io/anon/pen/aRzrdX