Leaflet JS地图无法适配div容器问题求助

嘿，我来帮你搞定这个Leaflet地图溢出容器的问题！

问题出在哪？ #

你的地图之所以会超出.map_panel这个方形容器，主要是两个核心原因：

1. 地图容器#embed_map没设置明确尺寸：Leaflet渲染地图时，必须依赖容器的确定宽高（不管是像素值还是百分比，只要有基准就行），不然它没法计算该渲染多大的范围，直接就“跑出去”了。
2. 你漏了Leaflet的核心样式文件：原来的代码里没引入Leaflet官方的CSS，这会导致地图的瓦片、标记等样式错乱，也间接加剧了溢出的问题。

另外，虽然你给.map_panel设了40%的宽高，但里面的#embed_map并没有继承这个尺寸，相当于地图根本没被限制在父容器里。

怎么解决？ #

很简单，两步就能搞定：

1. 给地图容器加尺寸样式

修改你的CSS，给#embed_map加上宽高100%，让它填满父容器.map_panel：

html, body { height: 100%; margin: 0; padding: 0; } /* 去掉浏览器默认边距，避免多余滚动条 */
.outer { border: 1px solid black; height: 100%; width: 50%; }
.map_panel { margin-left: 25%; margin-top: 25%; border: 1px solid black; height: 40%; width: 40%; }
#embed_map { width: 100%; height: 100%; } /* 关键：让地图容器占满父元素 */

2. 补全Leaflet的依赖文件

一定要引入Leaflet的CSS和JS文件，不然地图样式会乱套，我已经帮你补到代码里了。

修复后的完整代码 #

<head>
<meta charset="UTF-8">
<title>mapform</title>
<!-- 补全Leaflet的CSS引用 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
html, body { height: 100%; margin: 0; padding: 0; }
.outer { border: 1px solid black; height: 100%; width: 50%; }
.map_panel { margin-left: 25%; margin-top: 25%; border: 1px solid black; height: 40%; width: 40%; }
#embed_map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="outer">
  <div class="map_panel">
    <div id="embed_map"></div>
  </div>
</div>
<!-- 补全Leaflet的JS引用 -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
//Creating map options
var mapOptions = { center: [35.7101, 139.8107], zoom: 15 }
//Creating a map object
var map = new L.map('embed_map', mapOptions);
L.marker(mapOptions.center).addTo(map);
//Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
//Adding layer to the map
map.addLayer(layer);
</script>
</body>
</html>

这样修改后，地图就会乖乖待在.map_panel这个方形容器里啦！

内容的提问来源于stack exchange，提问作者Electric