传单不接受边界答案

【问题标题】：Leaflet not accepting boundaries传单不接受边界
【发布时间】：2018-09-30 21:12:18
【问题描述】：

在问我的问题之前，我想说我对 CSS 相当陌生，对 LeafLet 来说完全是新手。

几个月前，我创建了一个 html 文件，该文件在左侧显示地图的一部分，在右侧显示一些文本。地图提供者是 Google Maps。

文件看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            #root, html, body {
                height: 98%;
                font-family: sans-serif;
            }

            #map {
                float: left;
                width: 34.8%;
                height: 100%;
                overflow: visible;
            }

            #content {
                float: right;
                width: 65%;
                height: 100%;
                overflow: auto;
            }
        </style>
    </head>

    <body>
        <div id="root">
            <div id="map"></div>
            <div id="content">This is just a test This is just a test This is just a test</div>
        </div>

        <script>

            function initMap() {
                var nz = {lat: 51.5, lng: 0.0};
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 8,
                    scaleControl: true,
                    center: nz
                });
            }
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
    </body>
</html>

由于 Google 更改了它的许可政策并在我的地图上显示“仅用于开发目的”，我考虑更改地图提供商并切换到 OpenStreetMap 和 LeafLet。

所以我拿走了我的旧文件，只更改了显示地图的代码。现在文件看起来像这样：

<!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>
            #root, html, body {
                height: 98%;
                font-family: sans-serif;
            }

            #map {
                float: left;
                width: 34.8%;
                height: 100%;
                overflow: visible;
            }

            #content {
                float: right;
                width: 65%;
                height: 100%;
                overflow: auto;
            }
        </style>
    </head>

    <body>
        <div id="root">
            <div id="map"></div>
            <div id="content">This is just a test This is just a test This is just a test</div>
        </div>

        <script>
            //create map
            var centerLat = 51.5;
            var centerLon = 0.0;
            var initialZoom = 8;

            var map = L.map('map', {
                center: [centerLat, centerLon],
                zoom: initialZoom
            });
            var content = document.getElementById('content');

            //set map tiles source
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '<a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
                maxZoom: 18
            }).addTo(map);
        </script>
    </body>
</html>

但是这个 LeafLet 地图不会停留在它应该显示的 div 元素的边界内。如果我删除带有tileLayer 的部分，那么它会留在 div 内但不显示地图。谷歌搜索这个问题只发现一些人说缺少一个 CSS 文件，但我像 LeafLet 文档所说的那样包含了 LeafLet CSS 文件（复制和粘贴，所以不可能出现拼写错误）。地图不仅显示在它的边界之外，如果我想更改用鼠标显示的地图部分（单击并拖动），那么整个 div 会移动（或者它是一个额外的层？）。

我该怎么做才能在其边界内显示地图并将地图保持在其边界内，即使在单击和拖动时也是如此？

由于我不知道错误的确切来源，我添加了一些可能与我的问题无关的标签。

【问题讨论】：

标签： javascript html css leaflet

【解决方案1】：

#map 的 CSS 看起来像这样。

        #map {
            float: left;
            width: 34.8%;
            height: 100%;
            overflow: visible;
        }

删除显示溢出的行：可见。然后看起来还不错。

Codepen 链接： https://codepen.io/anon/pen/aRzrdX

【讨论】：

你说得对，谢谢。但是为什么当我删除代码的tileLayer 部分时它可以工作，为什么它可以在文件的谷歌版本中工作？
在 javascript 中运行代码的 tilelayer 部分之前，您已将地图对象加载到 html DOM 中。在加载时，它只显示一个空的地图容器（灰色）。然后，当您要求 tillayer 用瓦片填充地图对象时，它会用许多小的 png 图像填充它。这些图像从容器中伸出。如果您将溢出设置为隐藏，则看不到它们，但如果溢出可见，您会看到。 Google 地图代码在 CSS 中将溢出属性设置为自动：这是文档：developer.mozilla.org/en-US/docs/Web/CSS/overflow