在 Javascript/Dojo 中创建 Web 地图应用程序：
当我在浏览器中加载应用程序时，它会加载 html 元素但随后停止处理。我必须刷新浏览器才能加载页面的其余部分和 javascript。
我做了一整天的测试和调试，发现我的外部 JS 文件放错了位置（我是菜鸟）。修复了这个问题，应用程序加载得很好......除了我的一个文件没有被正确读取，或者根本没有被读取。
当我将有问题的外部 JS 文件的内容移动到默认的主代码时，它们包含的功能可以正常工作......但是地图需要再次刷新。
难住了。下面是导致我的问题的外部 JS 文件中的代码。我无法弄清楚为什么这是一个问题，因为当它不是外部的时，这些功能会按预期工作。
任何帮助是极大的赞赏。
//Toggles
function basemapToggle() {
basemaptoggler = new dojo.fx.Toggler({
node: "basemaptoggle",
showFunc : dojo.fx.wipeIn,
showDuration: 1000,
hideDuration: 1000,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(basemapToggle);
function layerToggle() {
layertoggler = new dojo.fx.Toggler({
node: "layertoggle",
showFunc : dojo.fx.wipeIn,
showDuration: 750,
hideDuration: 750,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(layerToggle);
function legendToggle() {
legendtoggler = new dojo.fx.Toggler({
node: "legendtoggle",
showFunc : dojo.fx.wipeIn,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(legendToggle);
编辑
编辑显示附加代码。真的被这件事难住了。很想得到一些反馈。我已经尝试将它移动到主文件，重新格式化函数并且所有这些东西都可以工作，除了它们需要刷新。我也丢失了一些关于刷新的信息。非常奇怪的行为。有什么好的方法来追踪这个吗？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<link rel="Stylesheet" href="ZoningClassifications.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/claroGrid.css">
<style type="text/css">
</style>
<script src="JS/layers.js"></script>
<script src="JS/search.js"></script>
<script src="JS/basemapgallery.js"></script>
<script src="JS/toggles.js"></script>
<script src="JS/identify.js"></script>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.TitlePane");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.tasks.locator");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Popup");
dojo.require("dijit.form.Button");
dojo.require("dojo.fx");
dojo.require("dijit.Dialog");
dojo.require("dojo.ready");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("esri.tasks.find");
var map, locator, layer, visible = [];
var legendLayers = [];
var resizeTimer;
var identifyTask,identifyParams;
var findTask, findParams;
var basemaptoggler = null;
var layertoggler = null;
var legendtoggler = null;
var findTaskParcel, findParamsParcel;
// var gridParcel, storeParcel;
编辑 2
我已经完全重写了将所有代码（css 除外）放在主 default.html 文件中的应用程序。我逐个测试以确保它按我想要的方式运行。添加切换代码是唯一抛出它并导致额外刷新的代码。
所以现在我使用 dijit.TitlePane 来保存下拉元素（底图库、图层、图例）。然而，有了这个，你不能改变外观和感觉来制作它们，这是我的最终目标。
任何人都可以提出一个替代方案，以便我可以使用 3 个不同的图像，这样当您单击图像并打开下拉菜单时，会打开包含底图库、图层列表和图例的下拉菜单？
编辑 3
显示我用来调用切换函数的代码可能会有所帮助：我怀疑这可能是我的问题所在。
<!--Legend-->
<div id="subheader">
<div style="position:absolute; right:60px; top:10px; z-Index:98;">
<div id="legendbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Show Legend">
<img src="images/Legend.png" />
<script type="dojo/method" event="onClick">
legendtoggler[(dojo.style("legendtoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="legendtoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
<div id="legendDiv"></div>
</div>
</div>
<!--Layer Toggle-->
<div id="layerbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Toggle Layers">
<img src="images/layers.png"/>
<script type="dojo/method" event="onClick">
layertoggler[(dojo.style("layertoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="layertoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
<span id="layer_list"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'
</span>
</div>
</div>
<!--Basemap Gallery-->
<div id="basemapbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">
<img src="images/imgBaseMap.png"/>
<script type="dojo/method" event="onClick">
</script>
</button>
<div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
<span id="basemapGallery">
</span>
</div>
</div>