ArcGIS API for JavaScript 地图加载空白现象-ArcGIS Web 开发学习（三）

最新推荐文章于 2025-05-15 14:54:01 发布

原创最新推荐文章于 2025-05-15 14:54:01 发布 · 6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#arcgis #web #地图

ArcGIS 专栏收录该内容

22 篇文章

订阅专栏

在使用ArcGIS API for JavaScript开发Web地图应用时，遇到地图对象未能填充整个mapdiv区域的问题。通过调整CSS样式，尤其是针对html, body, #mapDiv的padding属性设置，最终解决了地图显示被header遮挡的状况。关键在于将#mapDiv的padding设置为0，以确保地图充满整个容器。" 126418447,15058605,MyBatis工作原理源码深度解析,"['MyBatis', 'Java', 'MySQL']

我在做C#开发bs系统时，使用JavaScript加载了一个地图，但是加载完后出现了一个问题，就是map对象并没有布满整个mapdiv控件区域，参见下图：

我明白是控件布局的问题，所以就开始修改样式设置，我的设置如下所示：

     html, body, #mapDiv {
            padding: 30px 0px 0px 0px;
            margin: 0 0 0 0;
            height: 100%;
        }

        #mapDiv {
            position: relative;
        }

因为上图的白边和30的宽度基本一致，所以我就修改30为0，可是这样的话，我的mapdiv整个都被压在网页的header下面了，无奈之下我在html, body, #mapDiv 下载添加如下设置：background-color: blue; 发现整个页面的背景色都编程蓝色了，我心想这样肯定不对，不过通过这个设置，我明白了我上面的设置有可能是设置到了HTML和body等所有区域，所以把background-color: blue;放到下面的 #mapDiv，这次发现对了！只有mapdiv的背景被设置为蓝色了。这些我明白了，应该这样做：在 html, body, #mapDiv 设置HTML、body、mapdiv等所有布局的padding属性为30（这是我的默认设置），然后在 #mapDiv 里单独设置mapdiv的padding属性为0，这样的才能消除上一步和mapdiv相关的设置。具体设置和显示如下，OK，问题解决。

        html, body, #mapDiv {
            padding: 30px 0px 0px 0px;
            margin: 0 0 0 0;
            height: 100%;
        }

        #mapDiv {
            position: relative;
            padding: 0px 0px 0px 0px;
        }