从外部JavaScript文件初始化OpenLayers地图

Question

我的目标是使用外部JS文件加载OpenLayers地图。在头部我有一个jQuery库，在正文中我有OpenLayers库，我的OpenLayers代码和div标签。

<script type="text/javascript" src="http://example.com/OpenLayers.js"></script>
<script type="text/javascript" src="http://example.com/MyMapScript.js"></script>
<div id="map"></div>

然而，我无法访问body标签，因此无法触发大多数示例中使用的onload="init()"。相反，在下面的MyMapScript.js底部添加了以下行。

jQuery(window).load(init());

这里有些奇怪。使用Firebug，我可以看到调用了这段代码，并使用所有属性初始化了地图对象。我还可以看到它正在调用WMS服务器并成功获取所有地图瓦片。但是它实际上没有在页面上绘制任何内容，也没有添加额外的div到HTML中。

这个页面讨论了一个类似的问题，但我不确定如何将其应用到我的情况中，因为对我来说init()确实被调用了。 http://bytes.com/topic/javascript/answers/855670-unusual-behavior-function-calls-java-script 最终我选择的解决方案是这样做的。

<script type="text/javascript" src="http://example.com/OpenLayers.js"></script>
<script type="text/javascript" src="http://example.com/MyMapScript.js"></script>
<script type="text/javascript"> window.onload=init; </script>
<div id="map"></div>

这种方法可以奏效，但感觉有些勉强。

有没有办法从外部javascript文件初始化OpenLayers地图？我的window.onload=init;解决方案是否存在问题？如果必须与HTML内联进行，有更好的方法吗？

- Tom Styles

Answer 1

我自己解决了这个问题。我的初始代码除了两个问题以外都很好用。我在div标签上缺少了宽度和高度，而且语句的顺序有误，div应该在javascript文件之前而不是之后。

正确的代码应该像这样。

<div id="map" style="width:400px; height:400px;"></div>    
<script type="text/javascript" src="http://example.com/OpenLayers.js"></script>
<script type="text/javascript" src="http://example.com/MyMapScript.js"></script>

- Tom Styles

---

将其标记为答案，即使在自己的问题上这样做感觉有些奇怪。这有助于其他人找到解决方案。 - Niklas Wulff

不错，汤姆 - 我在这个问题上纠结了两天！只需要内联样式标签，我就搞定了！ - ErichBSchulz

哦，我也使用了延迟渲染，就像这个例子一样，而不是重新排序我的脚本：http://openlayers.org/dev/examples/late-render.html - ErichBSchulz