代码之家 › 专栏 › 技术社区 › Nostromo

不接受边界的传单

leaflet css html javascript

Nostromo · 技术社区 · 7 年前

在我问我的问题之前,我想说的是我对CSS是相当陌生的,对传单也是一个完全的新手。

文件看起来是这样的:

<!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和传单。

所以我拿了我的旧文件,只修改了显示地图的代码。现在文件如下所示:

<!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>

如果我把零件和 tileLayer ,然后它留在div中,但不显示地图。在google上搜索这个问题时,只发现一些人说缺少CSS文件,但我像传单文档中所说的那样包含了传单CSS文件(copy&粘贴,这样就不可能出现拼写错误)。

我能做些什么来显示地图在它的边界内,并保持地图在它的边界内,即使点击和拖动?

1 回复 | 直到 7 年前

jg80 7 年前

地图的CSS看起来像。

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

去掉写着overflow:visible. 那看起来不错。

代码笔链接: https://codepen.io/anon/pen/aRzrdX