javascript - 如何在一个html页面上显示多个 map-6ren

javascript - 如何在一个html页面上显示多个 map

转载作者：搜寻专家更新时间：2023-10-31 22:53:13

我对 html、css、javascript 和 leaflet 很陌生。

我尝试创建一个包含多个选项卡的 html 文件，并且在每个选项卡上我想显示不同的 map (左侧)以及 map 所显示事物的信息(右侧)。

我找到了 this有关如何执行选项卡部分的链接，我已经在 map 部分有一个工作示例，但 html 文件中只有一张 map 。

现在我尝试将这两个东西结合起来，但只有一张 map 可以正常工作(第一张)，其他 map 只显示灰色，左上角可能还有一小块 map 。但即使我尝试平移“损坏的” map ，也只会显示部分图 block 。

有人可以给我一些提示吗？是否有可能在一个带有传单的 html 文件中包含多个 map ？

到目前为止，这是我的 html 文件，包括 html、css 和 javascript。

<!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>
            /* Set height of body and the document to 100% to enable "full page tabs" */
            body, html {
                height: 100%;
                margin: 0;
                font-family: sans-serif;
            }

            /* Style tab links */
            .tablink {
                background-color: #9f9f9f;
                color: black;
                float: left;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 5px;
                font-size: 16px;
                width: 33.33%;
            }

            .tablink:hover {
                background-color: #7f7f7f;
            }

            /* Style the tab content (and add height:100% for full page content) */
            .tabcontent {
                color: black;
                background-color: white;
                display: none;
                padding: 15px 5px;
                height: 95%;
            }

            .map {
                float: left;
                width: 34.8%;
                height: 100%;
                border-radius: 5px 5px 0px 0px;
                border-width: 1px;
                border-style: dotted;
                border-color: #000000;
            }

        </style>
    </head>

    <body>
        <button class="tablink" onclick="openPage('Europe', this)" id="defaultOpen">Europe</button>
        <button class="tablink" onclick="openPage('Asia', this)">Asia</button>
        <button class="tablink" onclick="openPage('Africa', this)">Africa</button>

        <div id="Europe" class="tabcontent">
            <div id="mapEurope" class="map"></div>
        </div>

        <div id="Asia" class="tabcontent">
            <div id="mapAsia" class="map"></div>
        </div>

        <div id="Africa" class="tabcontent">
            <div id="mapAfrica" class="map"></div>
        </div>

        <script>
            function openPage(pageName, elmnt) {
                // Hide all elements with class="tabcontent" by default */
                var i, tabcontent, tablinks;

                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }

                // Remove the background color of all tablinks/buttons
                tablinks = document.getElementsByClassName("tablink");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].style.backgroundColor = "";
                }

                // Show the specific tab content
                document.getElementById(pageName).style.display = "block";

                // Add the specific color to the button used to open the tab content
                elmnt.style.backgroundColor = "#ffffff";
            }

            // Get the element with id="defaultOpen" and click on it
            document.getElementById("defaultOpen").click();

            //Create maps
            var centerLatEurope = 55.0;
            var centerLngEurope = 18.0;
            var initialZoomEurope = 4;

            var mapEurope = L.map('mapEurope', {
                center: [centerLatEurope, centerLngEurope],
                zoom: initialZoomEurope
            });

            //set one map tiles source
            googleStreetsEurope = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
                attribution: '<a href="https://www.google.com/maps">Google Maps</a>',
                maxZoom: 20,
                subdomains:['mt0','mt1','mt2','mt3']
            });
            googleStreetsEurope.addTo(mapEurope);



            var centerLatAsia = 49.0;
            var centerLngAsia = 88.0;
            var initialZoomAsia = 2;

            var mapAsia = L.map('mapAsia', {
                center: [centerLatAsia, centerLngAsia],
                zoom: initialZoomAsia
            });

            //set one map tiles source
            googleStreetsAsia = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
                attribution: '<a href="https://www.google.com/maps">Google Maps</a>',
                maxZoom: 20,
                subdomains:['mt0','mt1','mt2','mt3']
            });
            googleStreetsAsia.addTo(mapAsia);



            var centerLatAfrica = 0.0;
            var centerLngAfrica = 18.0;
            var initialZoomAfrica = 4;

            var mapAfrica = L.map('mapAfrica', {
                center: [centerLatAfrica, centerLngAfrica],
                zoom: initialZoomAfrica
            });

            //set one map tiles source
            googleStreetsAfrica = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
                attribution: '<a href="https://www.google.com/maps">Google Maps</a>',
                maxZoom: 20,
                subdomains:['mt0','mt1','mt2','mt3']
            });
            googleStreetsAfrica.addTo(mapAfrica);
        </script>
    </body>
</html>

我知道我可以使用数组来制作具有较少变量的 map ，但现在我只对让这些多个 map 起作用感兴趣。稍后我会关心代码的漂亮程度。

最佳答案

map 的 invalidateSize 有解决方法。您可以在更改选项卡时添加适当的方法:

        function openPage(pageName, elmnt) {
            ...
            setTimeout(function(){
                mapAsia.invalidateSize();
                mapAfrica.invalidateSize();
            }, 0);
        }

使用此 setTimeout，您的 map 将在每次选项卡更改后刷新，当然您可以更智能地根据单击的选项卡而不是全部刷新仅刷新所需的 map 。更新的 fiddle :https://jsfiddle.net/kev7m4d3/1/

请记住，这是一种解决方法，可能还有另一种解决方案。

invalidateSize( animate) - Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.

这可能是因为当使用选项卡 map 被隐藏时无法正确计算自己的大小，其他解决方案可能是例如在单击适当的选项卡后初始化 map ，并且每次 map 将在选项卡和 map 的适当空间将被初始化时初始化可见。

关于javascript - 如何在一个html页面上显示多个 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54060555/