gpt4 book ai didi

javascript - map 渲染许多小图 block 而不是一个大的单个图 block

转载 作者:行者123 更新时间:2023-11-28 04:18:38 27 4
gpt4 key购买 nike

我正在创建一个由三个 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 张随机图片。

这是正在发生的事情的图片:

enter image description here

最佳答案

您忘记了标记中的“s”

var overlayMaps = {
"Markers": markers
};

现在应该可以工作了;)

关于javascript - map 渲染许多小图 block 而不是一个大的单个图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45625893/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com