javascript - 在滑动侧边栏中正确显示网络 map

Question

使用 this example 中的 ArcGis Javascript 3.17 API ，我试图从底部设置一个“可隐藏”的网络 map ，但它的表现与预期相差甚远，它无法正确加载并不断扩展

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;
}

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

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

Answer 1

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

• Esri CSS 未添加，因为该 map 未正确加载
• Id 和 classes 未正确使用。

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

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

希望这对您有所帮助:)