jquery - 从外部 Javascript 文件初始化 openlayers map

Question

我的目标是使用外部 JS 文件加载 OpenLayers map 。在 head 中我有一个 jQuery 库，在 body 中我有 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 服务器并成功获取所有 map 图 block 。然而，它实际上并没有在页面上绘制任何内容，也没有向 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 map ？我的 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>