2011-01-06 20 views
3

私の目的は、外部JSファイルを使用してOpenLayersマップをロードすることです。先頭にはjQueryライブラリがあり、本文にはOpenLayersライブラリ、Openlayersコード、divタグがあります。私はonload="init()"を発射することはできませんので外部Javascriptファイルからopenlayersマップを初期化する

<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タグにアクセスすることはできません。

代わりに、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とインラインでやりとりする必要がある場合は、それを行うより良い方法がありますか?

答えて

5

私は問題を自分で修正しました。私の初期のコードは、2つのこととは別に問題なく動作しました。 divタグの幅と高さが不足していたので、前に比べてjavascriptファイルの後にdivが来るように命令文を注文しました。

このようになっているはずです。

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

あなた自身の質問では奇妙に感じますが、答えとしてマークしてください。他の人が解決策を見つけるのを助ける。 –

+0

トムは2日間、この上に頭を鳴らした!インラインスタイルのタグが必要で、私は離れています! – ErichBSchulz

+0

ああ、私も、この例では、myscriptsをreorderingするのではなく、遅延描画を使用しました。http://openlayers.org/dev/examples/late-render.html – ErichBSchulz

関連する問題