在滑动侧边栏中正确显示网络地图

Question

使用 this example 中的 ArcGis Javascript 3.17 API，我试图从底部设置一个 "hideable" web 地图，但它的表现远非如此预期，它不会正确加载并不断扩展不停

Jsfiddle : https://jsfiddle.net/ppgab/83jdovv6/7

库：

https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js

https://js.arcgis.com/3.17

Html :

<div>
  <h1 class="big-text"> 
  Test Application
  </h1>
</div>

<div id="map" class="down">
  <i><img id="up_button" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png"></i>
</div>

Javascript :

var map;

require(["esri/map", "dojo/domReady!"], function(Map) {
  map = new Map("map", {
    basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
    center: [-122.45, 37.75], // longitude, latitude
    zoom: 13
  });
});



$('#row').click(function() {

  if ($("#row").hasClass("down")) {
    $("#row").removeClass("down");
    $("#row").animate({
      height: "50%"
    }, 600);

  } else {

    $("#row").animate({
      height: 28
    }, 350);
    $("#row").addClass("down");
  }

});

CSS :

body {
  margin: 0;
  background: url(https://pcbx.us/beoh.jpg);
  background-attachment: fixed;
  background-size: cover;
}

.big-text {
  text-align: center;
  color: #2C2C2C;
  font-family: pt sans narrow;
  font-weight: 100;
  font-size: 4em;
}

h2 {
  font-family: pt sans narrow;
  text-transform: uppercase;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.85);
}

#container {
  background: #303030;
  text-align: center;
  color: #FFF;
  font-size: 2em;
  height: 50%;
  width: 100%;
  bottom: 0;
}

.hidden {
  display: none;
}

#map {
  background: #303030;
  width: 100%;
  text-align: center;
  height: 28;
  bottom: 0;
  position: fixed;
}

我是一个初学者网络开发者，这毫无价值，大部分代码是我在网上找到的

或者，如果有人可以推荐一个可以在这种情况下使用的 JQuery 侧边栏滑动插件

Answer 1

好吧，我在你的 jsfiddle 中发现了一些东西...

Esri CSS 未添加，因为该地图未正确加载
Id and classes 未正确使用。

以下是正确的工作解决方案：

JSFiddle: https://jsfiddle.net/vikash2402/83jdovv6/11/

希望对您有所帮助:)

在滑动侧边栏中正确显示网络地图

Properly display web map in sliding sidebar

html

javascript

css

jquery

arcgis-js-api