从外部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我可以看到这个代码被调用,并且它使用它的所有属性初始化map对象.我还可以看到它正在调用WMS服务器并成功获取所有地图图块.但是它实际上并没有在页面上绘制任何内容,也没有向HTML添加额外的div.

这个页面讨论了一个类似的问题,但我不知道如何将它应用到我的情况,因为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内联,那么还有更好的方法吗？

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>