Question

我正在创建一个包含三个地图和总标记的地图，可以在like in this leaflet example之间切换，但是当我测试它时，而不是每个地图渲染作为填充地图框架的单个版本，它们显示为瓷砖布局中的多个倍数。下面是我目前正在使用的代码，请注意我用于地图的图像实际上不是地图，因此我使用的是＆L.39S.Simple＆＃39;。

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>

是的，我使用的是本地存储的图片，不，我没有图像设置来使用标准的网址格式，如果你选择尝试我的代码只需3张随机图片。

以下是正在发生的事情的图片：

Answer 1

你忘记了＆＃39;标记

var overlayMaps = {
        "Markers": markers
    };

现在应该可以工作;）

地图渲染许多小瓷砖而不是一个大的单个瓷砖

1 个答案: