0

私はjavascriptを初めて使用し、コードで何が起こっているのかを理解したいと思っています。私はjQueryとOpenLayersを使用してWebマッピングを行っています。

コード例1を次に示します。ここでは、マップ変数がonReady関数内に作成されています。

$(document).ready(function(){
    var map = new.OpenLayers.Map('map', options);
    $.get(my_python.cgi_script which returns an html table of available layers)
    });

私が理解している限り、私の'map'変数はローカルスコープを持っています。

その関数内で、いくつかのレイヤーを追加したり、コントロールを生成したりします。すべてが機能し、OpenLayersのドキュメントで説明されています。また、jQueryのgetメソッドを使用して、使用可能なレイヤーのテーブルを動的に生成するpython.cgiスクリプトを呼び出しています。これはすべて、上記のonReady内で発生します。

動的に生成されたコンテンツを操作する必要があり、コードをonLoad関数に配置する必要があることがわかりました。2番目のコードブロックをonReady関数に配置すると、レンダリングの順序が原因で、jQueryを介してサムネイルにアクセスできなくなります。

$(document).ready(function(){
    var map = new.OpenLayers.Map('map', options);
    //More code to dynamically generate a list of available layers, stored in a table
    $.get(my_python.cgi_script which returns an html table of available layers)
    });

$(body).onLoad(function(){
 $(img.thumbnail).bind('click', function(){
  var name = $(this).attr('layer_name_id')
  var layer = new OpenLayers.WMS(//all the stuff to add the layer, including name)
  map.addLayer('layer') //map undefined due to scope
});
});

上記のブロックでは、「マップ」は2番目の変数で未定義です。理由（スコープ）を理解し、マップをグローバル変数にする必要があると判断しました。次に試しました：

var map; //This is a global because it is defined outside of any functions?
$(document).ready(function(){
    map = new.OpenLayers.Map('map', options);
    //More code to dynamically generate a list of available layers, stored in a table
    $.get(my_python.cgi_script which returns an html table of available layers)
    });

$(body).onLoad(function(){
 $(img.thumbnail).bind('click', function(){
  var name = $(this).attr('layer_name_id')
  var layer = new OpenLayers.WMS(//all the stuff to add the layer, including name)
  map.addLayer('layer')
});
});

マップ変数はまだ定義されていません。なんで？グローバルがどのように機能するかを誤解していますか？

onReadyコードブロック内にonLoad関数を配置することで、すべてを機能させることができました。以下が機能している理由がわかりません。

$(document).onReady(function(){
    var map = new.OpenLayers.Map('map', options);
    //More code to dynamically generate a list of available layers, stored in a table
    $.get(my_python.cgi_script which returns an html table of available layers)

$(body).onLoad(function(){
 $(img.thumbnail).bind('click', function(){
  var name = $(this).attr('layer_name_id')
  var layer = new OpenLayers.WMS(//all the stuff to add the layer, including name)
  map.addLayer('layer')
  });
});

}）;

4

1 に答える 1

0

グローバル変数マップを宣言したコードスニペットが機能しています。ただし、JqueryにはonReadyメソッドとonLoadメソッドがありません。$（document）.ready（）関数で実行されるinit（）関数を作成する方がよいでしょう。$（document）.ready関数とbody.onload関数を混在させないでください。init関数を使用すると、document.readyイベントが発生します。

于 2012-04-20T13:16:33.170 に答える