难以在回调函数中传递参数（Google Map API Markers）

Question

我的代码有问题。确实，我正在尝试将数组的值作为参数提供，但在回调函数中，我得到的值是“未定义”。

我的目标是根据地点类别 (catLieu) 和地点类型 (typeLieu) 创建自定义标记。它适用于类别，但我对类型有困难。

这是我的代码（其中的一部分）：

var catLieu;
var typeLieu;
var education =['school', 'university'];

function performSearch() {
clearMaps();
var i;

var clickedEducation = [];
for (i=0;i<education.length;i++)
{
    var checkEducation=document.getElementById(education[i])
    if (checkEducation.checked)
    {
        clickedEducation.push(education[i])
    }
}

if (clickedEducation.length>0)
{
    var caseEdu=[];
    var lieuEdu='Education';
    for (var j=0;j<clickedEducation.length;j++)
            {
                caseEdu[j]=clickedEducation[j];
                var request = {
                    bounds: maCarte.getBounds(), 
                    types: caseEdu[j] // IT DOESN'T WORK
                };
                console.log
                service.radarSearch(request, function (results,status) {callbackExecute(results,status,callback,lieuEdu,caseEdu[j])}); // IT DOESN'T WORK
            }

}



function callbackExecute(results,status,fonctionDeRetour,catPlace,typePlace)
{
    fonctionDeRetour(results,status,catPlace,typePlace);
}



function callback(results, status, catPlace, typePlace) 
{

    if (status != google.maps.places.PlacesServiceStatus.OK) 
    {
        alert(status); //Message d'alerte zéro résultat
        return;
    }

    catLieu=catPlace;
    typeLieu=typePlace; 

    for (var i = 0, result; result = results[i]; i++) 
    {
        createMarker(result); // Créer un marqueur pour chaque résultat
    }
    catLieu="";

}
}

编辑：我写了“var caseEdu[];”但不是我的问题的根源。

EDIT2：问题已解决，非常感谢Dr.Molle :)

Answer 1

在执行radarSearch-callback的那一刻，外层循环已经结束，j指向caseEdu的末尾。

可能的修复：

替换这一行：

service.radarSearch(request, function (results,status) {callbackExecute(results,status,callback,lieuEdu,caseEdu[j])});

与....

(function(edu){
   service.radarSearch(request, 
                       function (results,status) {
                         callbackExecute(results, 
                                         status, 
                                         callback, 
                                         lieuEdu, 
                                         edu);
                       }); 
 })(caseEdu[j]);

....现在循环中的当前项将作为参数传递

---

演示：

var catLieu;
var typeLieu;
var education = ['school', 'university'];

function clearMaps() {
  var markers = maCarte.get('markers');

  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers.clear();
}

function performSearch() {
  clearMaps();
  var i;

  var clickedEducation = [];
  for (i = 0; i < education.length; i++) {
    var checkEducation = document.getElementById(education[i])
    if (checkEducation.checked) {
      clickedEducation.push(education[i])
    }
  }

  if (clickedEducation.length > 0) {
    var caseEdu = [];
    var lieuEdu = 'Education';
    for (var j = 0; j < clickedEducation.length; j++) {
      caseEdu[j] = clickedEducation[j];
      var request = {
        bounds: maCarte.getBounds(),
        type: caseEdu[j] // IT DOESN'T WORK
      };
      (function(edu) {
        service.radarSearch(request, function(results, status) {
          callbackExecute(results, status, callback, lieuEdu, edu)
        });
      })(caseEdu[j]);
    }

  }



  function callbackExecute(results, status, fonctionDeRetour, catPlace, typePlace) {
    fonctionDeRetour(results, status, catPlace, typePlace);
  }



  function callback(results, status, catPlace, typePlace) {

    if (status != google.maps.places.PlacesServiceStatus.OK) {
      //alert(status); //Message d'alerte zéro résultat
      return;
    }

    catLieu = catPlace;
    typeLieu = typePlace;

    for (var i = 0, result; result = results[i]; i++) {
      createMarker(result); // Créer un marqueur pour chaque résultat
    }
    catLieu = "";

  }
}

function createMarker(result) {
  maCarte.get('markers').push(new google.maps.Marker({
    position: result.geometry.location,
    map: maCarte
  }))
}

function initialize() {


  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    noClear: true,
    markers: new google.maps.MVCArray
  };
  maCarte = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
  service = new google.maps.places.PlacesService(maCarte)
  maCarte.controls[google.maps.ControlPosition.TOP_CENTER]
          .push(document.getElementById('ctrl'));
  google.maps.event.addListenerOnce(maCarte,'idle',performSearch);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
       body,
       #map_canvas {
         height: 100%;
         margin: 0;
         padding: 0
       }
       label {
         display: block;
       }
       #ctrl {
         background: #fff;
       }

<div id="map_canvas">
  <div id="ctrl">
    <label for="school">
      <input id="school" type="checkbox" onchange="performSearch()" />school</label>
    <label for="university">
      <input checked  id="university" type="checkbox" onchange="performSearch()" />university</label>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>