c# - ArcGIS API for JavaScript map 始终为 400 像素 x 400 像素

Question

在我的项目中，我使用 ArcGIS API for JavaScript https://developers.arcgis.com/javascript/但是对于(在这里插入非常大的坏词)我无法覆盖这个愚蠢的宽度/高度。无论我做什么，它都没有改变， map 变成 400px x 400px。

我试着用谷歌搜索它找到了一些 CSS 示例，但没有一个有效。

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

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

Answer 1

您遇到的问题与放置 map 的 Bootstrap 选项卡有关。初始化 map 时，选项卡 Pane 的样式设置为 display: none； map 不知道该怎么做，所以它会恢复到默认大小，即 400 x 400。您可以在选项卡可见后 初始化 map ，以便 map 获得您设置的大小通过 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

通常，应该可以调用 map 的 resize 方法，以便它重新初始化它的大小，但在这种情况下，这种或那种方式都行不通。

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

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

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