JavaScript 地图的 ArcGIS API 始终为 400 像素 x 400 像素

ArcGIS API for JavaScript map is always 400px by 400px

在我的项目中,我使用 ArcGIS API JavaScript https://developers.arcgis.com/javascript/ 但是对于(在这里插入非常糟糕的词)我无法覆盖这个愚蠢的 width/height.无论我做什么,它都没有改变,地图变成 400px x 400px。

我尝试 Google 它找到了一些 CSS 示例,但 none 确实有效。

这是怎么回事 - 最初当地图加载时大小为 400 x 400,然后在 window 重新调整大小后它确实占据了整个屏幕。我尝试使用 !important 设置 div 的大小。还是没有。

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

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

另请记住,任何父 div 或容器也可能需要调整大小才能发挥全部效果。看起来父级也有 400x400 的限制。您很可能需要将其扩展得太多。

这是一个可能的 Javascript 示例,在调整大小时将元素调整为 600x600。可能不是你想要的,但也许可以给你一个想法。

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";
};

您遇到的问题与您放置地图的 bootstrap 选项卡有关。初始化地图时,选项卡窗格的样式设置为 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

为了扩展@iH8 所说的内容,创建地图时,它从地图 div 的节点开始,并计算每个 parentNode 以计算地图的宽度和高度。如果包含地图的任何节点没有通过 css 指定的宽度或高度,JavaScript 的 ArcGIS API 将覆盖地图宽度和高度并将其设置为 400px x 400px。如果在 HTML DOM 树中设置了从 HTML 到地图的 div 的所有宽度,但高度未全部设置,您最终会得到一个使用您指定的宽度进行映射,但高度将为 400px。

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

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

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

已接受答案的主要问题是您一直在创建地图的新变量,大多数情况下在 GIS 应用程序中,您会将事件绑定到该地图并将其作为参数传递。所以使用全局变量是一种糟糕的解决方法