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 员工不再回复:/
为了扩展@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 应用程序中,您会将事件绑定到该地图并将其作为参数传递。所以使用全局变量是一种糟糕的解决方法
在我的项目中,我使用 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 员工不再回复:/
为了扩展@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 应用程序中,您会将事件绑定到该地图并将其作为参数传递。所以使用全局变量是一种糟糕的解决方法