我的代码有问题。实际上,我试图给出一个数组的值作为参数,但在回调函数中,我得到的值是'undefined'。
我的目标是根据地点类别(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 :)
答案 0 :(得分:0)
At the moment when the radarSearch-callback will be executed, the outer loop already has been finished, j
points behind the end of caseEdu
.
Possible fix:
replace this line:
service.radarSearch(request, function (results,status) {callbackExecute(results,status,callback,lieuEdu,caseEdu[j])});
with....
(function(edu){
service.radarSearch(request,
function (results,status) {
callbackExecute(results,
status,
callback,
lieuEdu,
edu);
});
})(caseEdu[j]);
....now the current item in the loop will be passed as argument
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>