Initialisieren einer Openlayers-Map aus einer externen Javascript-Datei

Question

Mein Ziel ist es, eine OpenLayers Map mit einer externen JS-Datei zu laden. Im Kopf habe ich eine jQuery-Bibliothek, und im Body habe ich die OpenLayers-Bibliothek, meinen Openlayers-Code und das div-Tag.

<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> 

Allerdings habe ich keinen Zugriff auf den Body-Tag, damit ich nicht onload="init()" abfeuern kann die ist, wie die meisten Beispiele arbeiten.

Stattdessen, am unteren Rand von MyMapScript.js habe ich die folgende Zeile hinzugefügt.

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

Dies ist, wo es ein bisschen seltsam wird. Mit Firebug kann ich sehen, dass dieser Code aufgerufen wird und dass das Map-Objekt mit all seinen Eigenschaften initialisiert wird. Ich kann auch sehen, dass es den WMS-Server aufruft und alle Kartenkacheln erfolgreich abruft. Es wird jedoch nichts auf der Seite gezeichnet, und dem HTML werden keine zusätzlichen Divs hinzugefügt.

Diese Seite spricht über ein ähnliches Problem, aber ich bin mir nicht sicher, wie man es auf meine Situation anwenden kann, da für mich init() tatsächlich aufgerufen wird. http://bytes.com/topic/javascript/answers/855670-unusual-behavior-function-calls-java-script

Die Lösung, für die ich am Ende gegangen bin, ist dies zu tun.

<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> 

Was funktioniert, aber fühlt sich an wie ein Toffee.

Gibt es eine Möglichkeit, eine OpenLayers Map aus einer externen Javascript-Datei zu initialisieren? Gibt es etwas falsch mit meiner window.onload=init; Lösung? Wenn ich es inline mit dem HTML tun muss, gibt es bessere Möglichkeiten, es zu tun?

Answer 1

Ich habe das Problem selbst behoben. Mein ursprünglicher Code funktionierte gut, abgesehen von zwei Dingen. Mir fehlte die Breite und Höhe auf dem div-Tag, und ich hatte die Anweisungen so angeordnet, dass das div nach den Javascript-Dateien und nicht früher kam.

Es sollte so aussehen.

<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>