配列値を関数パラメータとして繰り返し設定する方法

Question

マップ上にマーカーを表示するためにgoogle maps APIを使用します。

各マーカーは地図上のショップを指します。

私の問題は、各マークのイベントハンドラを作成することです。このイベントハンドラは、指定されたマークがクリックされたときにショップに関する情報をツールチップに表示します。

私はテキスト入力を使用してユーザーが街を入力できるようにし、jqueryを使用して近くの送信ボタンでclickイベントを処理します。それから私は戻って、オブジェクトを以下の取得、PHPサイトにクエリを送信します。

d: Object 
error: false 
lat: "52.3744440000" 
lng: "9.7386110000" 
shop: Array[2] 
0: Object 
address: "Addressstreet 12" 
lat: "52.3761209000" 
lng: "9.7387242000" 
name: "Shop 1" 
tel: "1234" 
__proto__: Object 
1: Object 
length: 2 
etc. 

は今、私はマップを中央に都市の座標で緯度とLNGの値を使用します。 は、その後、私は方法（店舗）paintShopsにお店の配列を送信します。

function paintShops(shops){ 
for (var i = 0; i < shops.length; i++){ 
kl = shops[i]; 
var ka = parseFloat(kl.lat); 
var kb = parseFloat(kl.lng); 
tel = kl.tel; 
address = kl.address; 
var son = new google.maps.Marker({ 
position: new google.maps.LatLng(ka, kb), 
map: map, 
title: kl.name, 
clickable: true 
}); 
google.maps.event.addListener(son, 'click', function(son, tel, address) { 
displayShopTooltip(son, tel, address); 
} 

私の問題は、上記のスニペットの最後の行にある：私はマークをクリックすると、displayShopTooltipのパラメータTELと住所があります未定義。 私はこの問題がないようにするために何をすべきか、あるいは別の方法を知りたいと思います。 ありがとうございます。

Answer 1

任意に渡すための機構がないとしてあなたが持っている問題は、（リスナー内TELと住所を宣言することによって、あなたは、イベントハンドラのコールバック内未定義にそれらを設定しているということですパラメーター）。解決策は、ハンドラがマーカと同じスコープ内にある（つまり、マーカ付きの関数内にラップされている）ことを確認することです。私はあなたが作った1つまたは2つの他のエラー（たとえば、変数を正しく宣言していないなど）があったため、javascriptのスコープについて読んでみることをお勧めします - javascriptのスコープは他のプログラミング言語とは大きく異なります。

function paintShops(shops){ 
    for (var i = 0; i < shops.length; i++){ 
    makeMarker(shops[i]); 
    } 

    function makeMarker(kl) { 
    var ka = parseFloat(kl.lat); 
    var kb = parseFloat(kl.lng); 
    var tel = kl.tel; 
    var address = kl.address; 
    var son = new google.maps.Marker({ 
     position: new google.maps.LatLng(ka, kb), 
     map: map, 
     title: kl.name, 
     clickable: true 
    }); 
    google.maps.event.addListener(son, 'click', function(son) { 
     displayShopTooltip(son, tel, address); 
    } 
    } 

Answer 2

$ .each（）関数は$（selector）.each（）と同じではなく、jQueryオブジェクトに対して排他的に反復処理するために使用されます。マップ（JavaScriptオブジェクト）であれ、配列であれ、$ .each（）関数を使用して任意のコレクションを反復処理できます。配列の場合、コールバックは毎回配列インデックスと対応する配列値を渡します。 （値はthisキーワードでもアクセスできますが、単純な文字列または数値の場合でも、この値は常にObjectとしてラップされます）。メソッドは最初の引数、つまり反復されたオブジェクトを返します。

Answer 3

クリックハンドラのパラメータとしてtelとaddressを定義しましたが、意味がありません。あなたはおそらく、あなたの代わりに、グローバル変数にアクセスしたい：

google.maps.event.addListener(son, 'click', function(son) { 
    displayShopTooltip(son, tel, address); 
} 

それでも、この方法は一つだけの店があることができます（唯一のグローバルtelとaddressがあります）。代わりに、ローカル変数とクロージャを使用します。

function paintShops(shops) { 
    for (var i = 0; i < shops.length; i++) { 

     (function() {    
      var kl = shops[i]; 
      var ka = parseFloat(kl.lat); 
      var kb = parseFloat(kl.lng);    
      var tel = kl.tel; 
      var address = kl.address; 

      var son = new google.maps.Marker({ 
       position: new google.maps.LatLng(ka, kb), 
       map: map, 
       title: kl.name, 
       clickable: true 
      }); 

      google.maps.event.addListener(son, 'click', function(son) { 
       displayShopTooltip(son, tel, address); 
      } 
     })(); 
    } 
}