我正在创建一个由三个 map 和标记组成的 map ，可以在 like in this leaflet example 之间切换。 ，尽管当我测试它时，它们不是将每个 map 渲染为填充 map 框的单个版本，而是在图 block 布局中显示多个版本。下面是我当前正在使用的代码，请注意，我用于 map 的图像实际上并不是 map ，因此我使用的是“L.CRS.Simple”。
This is the result I was expecting (没有制作者和我的图像)，也许有人可以发现我哪里出错了？
-
<html>
<head>
<title>Interactive Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<style>
#map {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div id="map">
<script>
var map1 = L.tileLayer('map1.png');
var map2 = L.tileLayer('map2.png');
var map3 = L.tileLayer('map3.png');
var markers = L.layerGroup(); //Leaving empty for the time being, using just to create check box in menu
var map = L.map('map', {
crs: L.CRS.Simple,
layers: [map1, map2, map3, markers],
maxZoom: 5
});
var baseMaps = {
"Map 1": map1,
"Map 2": map2,
"Map 3": map3
};
var overlayMaps = {
"Markers": markers
};
var bounds = [[0,0], [1000,1000]];
L.control.layers(baseMaps, overlayMaps, bounds).addTo(map);
map.fitBounds(bounds);
</script>
</div>
</body>
是的，我正在使用本地存储的图像，不，我没有图像设置来使用标准 URL 格式，如果您选择尝试我的代码，只需将其分成 3 张随机图片。
这是正在发生的事情的图片:
最佳答案
您忘记了标记中的“s”
var overlayMaps = {
"Markers": markers
};
现在应该可以工作了;)
关于javascript - map 渲染许多小图 block 而不是一个大的单个图 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45625893/