Question

在下面的标记中，我想将MapView的container属性设置为<div>，其中Id =“viewDiv”。当我使用<div> =“容器”移除外部Id时，一切正常并显示地图。当我使用外部容器<div>运行时，地图不会出现。如何将容器属性设置为内部<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>

Answer 1

如果删除out div，它的工作原理是因为内部div的高度为窗口的100％。但是对于out div，内部div的高度为100％（为outter div指定的高度）。所以给outter div一个高度。

#container {
  height: 100%
}

如何选择包含ID的内部<div>？

1 个答案: