地图应用程序需要刷新才能初始化

9

我在StackOverflow上尝试了这个问题，但没有得到任何答案。希望大家都能提供帮助。

在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"/>
    <title> 
        Zoning Classifications
    </title> 
        <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/identify.js"></script>
        <script src="JS/toggles.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");

编辑2 我已经完全重写了应用程序，将所有代码（css除外）放置在主default.html文件中。我进行了逐项测试，以确保其功能符合我的要求。添加切换代码是唯一抛出该代码并引起额外刷新的代码。

所以现在我正在使用dijit.TitlePane来保存下拉元素（底图库，图层，图例）。但是，使用此方法您无法更改使它们成为图像的外观，这是我的最终目标。

有人可以建议其他方式，这样我可以使用3张不同的图像，以便在单击图像并打开包含底图图库，图层列表和图例的下拉菜单时使用？

arcgis-server  arcgis-javascript-api 
— 克雷格
source
我在这里看不到head / body标签，您的所有javascript代码是否都已加载到标题中？
— Glenn Plas 2012年
抱歉。固定它。当我开始发布时，它以某种方式被格式化。
— Craig 2012年
— Mapperz
尝试过，但是什么也没有。我几乎可以确定问题出在我的dojo.fx.Toggler函数上。我所有其他的外部js文件都能正常运行。不知道为什么我要麻烦。联系了ESRI，他们正在调查中，希望我能尽快解决。
— Craig
您是否尝试过使用Chrome开发者工具之类的工具来查看实际加载了哪些外部文件？这至少可以告诉您页面加载文件的距离以及错误的位置。
— pecoanddeco，2012年

Answers:

7

我将合并所有这些dojo.addOnLoad（）调用。我怀疑在调用函数之前没有加载任何东西。

从所有外部javascript文件中剥离所有dojo.addOnLoad调用，并将它们捆绑到您的主HTML文件中的一个调用中。将要加载的所有函数放到javascript底部的新函数中，如下所示：

function init() {
  basemapToggle();
  layerToggle();
  whatEver();
}
dojo.addOnLoad(init);

这将确保在尝试启动任何功能之前，所有内容均已加载。

— 薄荷
source
5

如果您想对它进行更精细的控制/测试，则无需任何框架（jquery / dojo）来启动它。您可以尝试这个小图书馆：

var stack = [],
    interval,
    loaded; // has window.onload fired?

function doPoll() {
  var notFound = [];
  for (var i=0; i<stack.length; i++) {
    if (document.getElementById(stack[i].id)) {
      stack[i].callback();
    } else {
      notFound.push(stack[i]);
    }
  }
  stack = notFound;
  if (notFound.length < 1 || loaded) {
    stopPolling();
  }
}

function startPolling() {
  if (interval) {return;}
  interval = setInterval(doPoll, 10);
}

function stopPolling() {
  if (!interval) {return;}
  clearInterval(interval);
  interval = null;
}

function onAvailable(id, callback) {
  stack.push({id:id, callback:callback});
  startPolling();
}

window.onload = function() {
  loaded = true;
  doPoll();
};

然后像这样使用它：

onAvailable('map', function () {
    // Only do stuff here once the map div is available (this always happens after the DOM is ready)
  ....
});

基本上，您要做的是说：等待做某事，直到该div存在为止。它的行为与document.ready不同，稍后会“解雇”。因此，对于您来说，您可以将代码放在dojo.*此处。

这是一个很好的测试，看看您是否碰巧被某些javascript代码的加载顺序所咬。我之所以这样做，是因为它在解决此类问题方面非常有用。

— 格伦·普拉斯（Glenn Plas）
source
我尝试将您的建议合并到我的代码中没有任何运气。您能否进一步说明这在我现有的混乱情况中应该去哪里？
— Craig 2012年
将顶部的代码块放在单独的js文件中，并将其包含在标题中，然后在代码中测试要执行的dom元素：onAvailable('basemapToggle', function () { dojo.addOnLoad(basemapToggle); });这不是直接解决方案，但可以帮助您了解加载顺序问题
— Glenn Plas
3

您似乎遇到了脚本顺序问题。您的toggles.js依赖于dojo的加载。但是，在您的html中，您在加载ESRI的javascript API（加载dojo）之前先调用toggles.js。这是关于如何重新组织脚本的建议。

...
<style type="text/css"></style> 

    <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");
    </script>
    <script src="JS/layers.js"></script>
    <script src="JS/search.js"></script>
    <script src="JS/basemapgallery.js"></script>

    <script src="JS/identify.js"></script>
    <script src="JS/toggles.js"></script>
    ...
— 雷肯多
source
我尝试重新订购脚本。当我将外部脚本放在API脚本之后时，只有html加载（标题，徽标，子标题）。然后，我必须刷新才能加载JavaScript。
— Craig
我编辑了最后一个答案。还尝试将dojo.requires脚本放在外部文件之前。另外，您可以考虑将外部脚本移到html主体的底部，以确保在这些脚本运行之前已加载所有DOM元素。
— raykendo 2012年
您两个已编辑的选项都导致相同的错误，需要刷新以加载js。
— Craig
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.