JSF：Javascript google maps API - マーカーが同じタイトルを取得する

Question

私はおそらくここで何かダムをやっていますが、なぜ私のマーカーが両方とも同じタイトルになるのか理解できません。両方のマーカーはジオコーダーからの正しい位置になり、別の場所に表示されます。

前にレンダリングした後

function gMapInitialize() { 

    var myLocs = [<ui:repeat value = "#{LocationBean.locations.address}" var = "loc"  varStatus = "loop"> 
        [ "#{loc.name}","#{loc.street}","#{loc.city}","#{loc.state}", "#{loc.zipCode}"]#{!loop.last ? ',' : ''} 
        </ui:repeat>]; 
    //<![CDATA[     
    var myOptions = { 
     center: new google.maps.LatLng(37.212832,-76.750488), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var geocoder = new google.maps.Geocoder(); 

    for(var i = 0; i < myLocs.length; i++){ 
    var myLoc = myLocs[i]; 
    var geoOptions = { 
    address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4], 

    } 
    geocoder.geocode(geoOptions ,function(results, status){ 

    if(status == google.maps.GeocoderStatus.OK){ 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: results[0].geometry.location, 
    title: myLoc[0], 
    zIndex: i 
    }); 


    } 
    });    


    } 
    } 
// ]]> 

をレンダリング：

function gMapInitialize() { 

    var myLocs = [ 
        [ "Richmond","9 North 3rd Street","Richmond","VA", "23219"], 

        [ "Hampton Roads","632 North Witchduck Road","Virginia Beach","VA", "23462"] 
        ]; 
    //<![CDATA[     
    var myOptions = { 
     center: new google.maps.LatLng(37.212832,-76.750488), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var geocoder = new google.maps.Geocoder(); 

    for(var i = 0; i < myLocs.length; i++){ 
    var myLoc = myLocs[i]; 
    var geoOptions = { 
    address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4], 

    } 
    geocoder.geocode(geoOptions ,function(results, status){ 

    if(status == google.maps.GeocoderStatus.OK){ 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: results[0].geometry.location, 
    title: myLoc[0], 
    zIndex: i 
    }); 


    } 
    });    


    } 
    } 
// ]]> 

私は1つのループにあまりを行うにしようとしていますか？私は閉鎖について何か聞いていますが、javascriptには新しいし、それについては何も知らない。

Ohh yeah：私は各マーカーに2つの名前の2番目を取得します。マーカーは正しい位置にありますが、両方とも「Hampton Roads」と題されています。したがって、正しい情報がタイトルに渡されますが、最初のタイトルのように2番目のタイトルで上書きされています。

UPDATE私はそれを修正しましたが、閉鎖についてもう少し理解していると思います。だから、主にループはループを維持し、関数はその最後にすでに呼び出されています。したがって、以下でも、各マーカーはおそらく同じzIndexを持ち、「i」も渡す必要があります。

for(var i = 0; i < myLocs.length; i++){ 

    var myLoc = myLocs[i]; 
    var geoOptions = { 
    address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4], 

    } 

    geocoder.geocode(geoOptions ,addMarkers(myLoc[0])); 
    } 

    function addMarkers(myTitle){ 
    return function(results,status){ 
    if(status == google.maps.GeocoderStatus.OK){ 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: results[0].geometry.location, 
    title: myTitle, 
    zIndex: i 
    }); 


    } 
    }; 



    } 

Answer 1

これは簡単な閉鎖の問題です。 myLoc [i]は、両方のケースでループ終了後に同じエンティティを参照します。新しいスコープを作成する関数にラップするだけです。

for(var i = 0; i < myLocs.length; i++){ 
    (function(num) { 
    var myLoc = myLocs[num]; 
    var geoOptions = { 
    address: myLoc[1] + "," + myLoc[2] + "," + myLoc[3] + "," + myLoc[4], 

    } 
    geocoder.geocode(geoOptions ,function(results, status){ 

    if(status == google.maps.GeocoderStatus.OK){ 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: results[0].geometry.location, 
    title: myLoc[0], 
    zIndex: num 
    }); 
    }(i)); 
    }