在滑動邊欄中正確顯示網絡地圖

使用ArcGis Javascript 3.17 API從this example，我試圖從底部設置一個「可隱藏的」網絡地圖，但它的行爲與預期相去甚遠，無法正確加載，不斷擴大不停在滑動邊欄中正確顯示網絡地圖

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

值得什麼，我是一個初學者web開發人員，大多數代碼我在網上找到

或者，如果有人可以推薦一個JQuery滑動側邊欄插件會在這種情況下

來源

2016-09-14 Mojimi

很好地工作，我想通了一些事情在你的jsfiddle ...

Esri CSS不是因爲那個地圖的添加了一個未正確加載
Id and classes不正確使用。

下面是正確可行的解決方案：

的jsfiddle：https://jsfiddle.net/vikash2402/83jdovv6/11/

希望這將幫助你:)

來源

2016-09-19 13:00:59

讓我知道如果您有任何疑問。 –

我最終認爲這是缺少的東西，但非常感謝朋友！ – Mojimi

歡迎您:) –

在滑動邊欄中正確顯示網絡地圖

回答

相關問題