在下面的标记中,我想设置 container
MapView 的属性为 <div>
与 Id
=“viewDiv”。当我移除外部 <div>
与 Id
=“容器”一切正常并出现 map 。当我使用外部容器 <div>
运行时, map 不出现。如何将容器属性设置为内部<div>
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView){
var map = new Map({
basemap: "national-geographic"
});
var viewNode = document.getElementById("viewDiv");
var view = new MapView({
container: viewNode, // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
zoom: 4, // Sets the zoom level based on level of detail (LOD)
center: [15, 65] // Sets the center point of view in lon/lat
});
});
</script>
</head>
<body>
<div id="container">
<div id="viewDiv"></div>
</div>
</body>
</html>
最佳答案
如果删除外部 div,它会起作用的原因是内部 div 的高度为窗口的 100%。但是对于外部 div,内部 div 的高度为 100%(为外部 div 指定的高度)。因此给外部 div 一个高度。
#container {
height: 100%
}
关于javascript - 如何选择包含 ID 的内部 <div>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42793255/