Question

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

我试图在Google上找到一些CSS示例，但没有一个可行。

这是发生了什么 - 最初当地图加载大小为400 x 400然后在窗口重新调整大小后它占据整个屏幕。我试图用！important设置该div的大小。仍然没有。

也许有人遇到了同样的问题。我需要将那个顽固的地图设置为宽度：100％;身高：100％

CSS ArcGIS Map

Answer 1

您遇到的问题与您放置地图的引导标签有关。初始化地图时，标签窗格的样式设置为display: none ;地图不知道如何处理它，因此它会回退到默认大小400到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

Answer 2

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

我遵循iH8关于如何解决它的建议，并确保通过px，em或％分配所有宽度和高度。

Answer 3

我只是因为我的地图位于kendo-ui窗口中的一个看不见的div内而陷入困境。所以只是想补充一点，如果地图div改变了一个好的解决方案是在调整大小或打开之后（任何方式让div可见）是设置div的高度和宽度

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

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

Answer 4

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

另请注意，任何父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";
};

ArcGIS API for JavaScript地图始终为400px乘400px

4 个答案: