ArcGIS API for JavaScript 地图始终为 400 像素 x 400 像素答案

【问题标题】：ArcGIS API for JavaScript map is always 400px by 400pxArcGIS API for JavaScript 地图始终为 400 像素 x 400 像素
【发布时间】：2015-05-08 15:59:27
【问题描述】：

在我的项目中，我使用 ArcGIS API for JavaScript https://developers.arcgis.com/javascript/ 但对于（在此处插入非常糟糕的词）我无法覆盖这个愚蠢的宽度/高度。无论我做什么，它都不会改变，地图是 400 像素 x 400 像素。

我尝试在 Google 上找到一些 CSS 示例，但没有一个有效。

这就是正在发生的事情 - 最初，当地图加载时，大小为 400 x 400，然后在窗口重新调整大小后，它确实占据了整个屏幕。我尝试使用 !important 设置该 div 的大小。还是什么都没有。

也许有人确实遇到了同样的问题。我需要将那个顽固的地图设置为 width: 100%;高度：100%

【问题讨论】：

标签： c# asp.net-mvc-4 dojo arcgis arcgis-js-api

【解决方案1】：

我只是偶然发现这个问题有问题，因为我的地图在 kendo-ui 窗口中的一个不可见的 div 内。所以只想补充一点，如果地图 div 发生变化，一个好的解决方案是在调整大小或打开之后（任何让 div 可见的方法）是设置 div 的高度和宽度

        $("#"+config.map).height("100%");
        $("#" + config.map).width("100%");

接受答案的主要问题是您一直在创建地图的新变量，主要是在 GIS 应用程序中，您将有事件绑定到该地图，并将其作为参数传递。所以使用全局变量是一种可怕的解决方法

【讨论】：

【解决方案2】：

为了扩展@iH8 所说的，创建地图时，它从地图div 的节点开始，并处理每个父节点以计算地图的宽度和高度。如果包含地图的任何节点没有通过 css 分配宽度或高度，ArcGIS API for JavaScript 将覆盖地图宽度和高度并将其设置为 400 x 400 像素。如果在 HTML DOM 树中设置了从 HTML 到地图 div 的所有宽度，但高度未全部设置，您最终会得到一个具有您指定宽度的地图，但高度将为 400px。

我会遵循 iH8 关于如何解决它的建议，并确保所有宽度和高度都按 px、em 或 % 分配。

【讨论】：

【解决方案3】：

您遇到的问题与您放置地图的引导选项卡有关。初始化地图时，选项卡窗格的样式设置为display: none；地图不知道如何处理它，所以它会退回到默认大小，400 x 400。您可以在标签可见后初始化地图，以便地图获得您设置的大小通过 CSS：

var map;

// Check when tabs get switched
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Check if is tab with map element
    if (e.target.textContent === 'ArcGIS') {
        // Check if map is not already initialized
        if (map === undefined) {
            // Initialize
            require([
                "esri/map",
                "dojo/domReady!"
            ], function(Map) { 
                map = new Map('map', {
                    center: [4.9, 52.378333],
                    zoom: 11,
                    basemap: 'topo'
                });
            });
        }
    }
});

有问题的测试用例：http://plnkr.co/edit/rOcpNeRPZau7vJQUSnGB?p=preview

带有解决方案的测试用例：http://plnkr.co/edit/Tqo6M3EhyDjrNTrCwM0T?p=preview

通常应该可以调用地图的resize 方法，以便它重新初始化它的大小，但在这种情况下，一种或另一种方式将不起作用。

见：https://developers.arcgis.com/javascript/jsapi/map-amd.html#resize

这里也描述了您的问题，应该有解决方案，但 esri 员工不再回应：/

https://geonet.esri.com/thread/94922

【讨论】：

正是问题所在 - 在选项卡可见后需要初始化地图。解决了我的问题，+1

【解决方案4】：

请记住，元素级样式将始终覆盖任何其他样式，因为它们是最后解析的。再多的 CSS 都不会覆盖元素级样式。要编辑它，您必须从服务器修改它以显示为您想要的大小，或者在窗口调整大小时使用 Javascript 修改元素样式设置。

另外请记住，任何父 div 或容器也可能需要调整大小以充分发挥作用。看起来父母也有 400x400 的限制。您很可能需要扩展它。

这是一个在发生调整大小时将元素大小调整为 600x600 的可能 Javascript 示例。可能不是您想要的，但可能会给您一个想法。

window.onresize = function(event) {
    document.getElementById('mapDiv_root').style.width = "600px";
    document.getElementById('mapDiv_root').style.height = "600px";

    document.getElementById('mapDiv').style.width = "600px";
    document.getElementById('mapDiv').style.height = "600px";
};

【讨论】：