个人中心
gpt4 book ai didi

javascript - 传单不接受边界

转载 作者：太空宇宙 更新时间：2023-11-04 01:04:06 25 4
gpt4 key购买 nike

在我问我的问题之前，我想说我是 CSS 的新手，也是 LeafLet 的新手。

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

文件看起来像这样:

<!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 更改了它的许可政策并在我的 map 上显示“仅用于开发目的”，我考虑更改 map 提供商并切换到 OpenStreetMap 和 LeafLet。

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

<!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 map 并没有停留在它应该显示的 div 元素的边界内。如果我删除带有 tileLayer 的部分，那么它会保留在 div 中，但不会显示 map 。谷歌搜索这个问题只发现一些人说缺少一个 CSS 文件，但我包括了 LeafLet CSS 文件，就像 LeafLet 文档所说的那样(复制和粘贴，所以不可能有拼写错误)。 map 不仅显示在其边界之外，如果我想更改用鼠标(单击并拖动)显示的 map 部分，那么整个 div 都会移动(或者它是一个额外的图层？)。

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

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

最佳答案

#map 的 CSS 看起来像。 

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

删除显示 overflow:visible 的行。然后看起来还不错。

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

关于javascript - 传单不接受边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52578134/

25 4 0
文章推荐： node.js - 如何使用全局安装的 Karma 插件
文章推荐： Python 解析日期时间 : get current month/first of the month
文章推荐： node.js - 添加 View 、 Controller 和模型，无需重新启动 Sails
文章推荐： ios - Objective-C语法问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com