setTimeout() et la suppression des marqueurs sur google map

Je ne comprends pas pourquoi setTimeout ne fonctionne pas comme prévu.setTimeout() et la suppression des marqueurs sur google map

Je veux déposer chaque marqueur à une heure différente, pas tous en même temps.

Coller et exécuter ce code dans http://jsfiddle.net, puis supprimer des commentaires afin de voir le comportement drôle:

 //setTimeout(function() { 
      addMarker(m); 
     //}, i * 500);

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var berlin = new google.maps.LatLng(52.520816, 13.410186); 
    var neighborhoods = [ 
    new google.maps.LatLng(52.511467, 13.447179), 
    new google.maps.LatLng(52.549061, 13.422975), 
    new google.maps.LatLng(52.497622, 13.396110), 
    new google.maps.LatLng(52.517683, 13.394393) 
    ]; 
    var map; 
    function initialize() { 
    var mapOptions = { 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: berlin 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
    } 

    function drop() { 
    var j = 0; 
    for (var i = 0; i < neighborhoods.length; i++) { 
     var m = neighborhoods[i]; 
     //setTimeout(function() { 
      addMarker(m); 
     //}, i * 500); 
    } 
    } 
    function addMarker(m) { 
    new google.maps.Marker({ 
     position: m, 
     map: map, 
     draggable: false, 
     animation: google.maps.Animation.DROP 
    }); 
    } 
</script> 
<body onload="initialize()"> 
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div> 
<button id="drop" onclick="drop()">Drop Markers</button> 
</body>

Source

2012-02-15 lito

Pourquoi ne collez-vous pas le code dans jsfiddle et publiez le lien? –

jsfiddle est la migration des serveurs et actuellement tout le monde ne peut pas enregistrer de code sur le – lito

C'est parce que la valeur de « m » a changé bien avant l'événement timeOut déclenche.

Vous devez placer ce code dans une fermeture afin de capturer la valeur de m.

Quelque chose comme:

for (var i = 0; i < neighborhoods.length; i++) { 
    var m = neighborhoods[i]; 

    (function(n){ 
     setTimeout(function() { 
     addMarker(n); 
    }, i * 500); 
    }(m)); 
}

Source

2012-02-15 14:02:56

Le problème est votre itération sur les quartiers et la variable locale var m = neighborhoods[i]. La valeur de m, qui est utilisée dans addMarker(m) est remplacée par le tout dernier élément de neighborhoods, ce qui entraînera la chute de tous les marqueurs au même endroit.

Utilisez plutôt le code suivant (JSFiddle). Il itère sur un compteur global, que vous pouvez remplacer par une variable statique et définit un intervalle au lieu d'un délai d'attente:

var droppedCount = 0; 
    var droppedInterval = null; 

    function drop() { 
    if(droppedCount === neighborhoods.length){ 
     clearInterval(droppedInterval); 
     return; 
    } 
    else if(droppedInterval === null) 
     droppedInterval = setInterval(drop,500); 

    var m = neighborhoods[droppedCount++]; 
    addMarker(m); 
    }

Source

2012-02-15 14:02:12 Zeta

oui, je comprends que, la valeur est constamment (4), mais pourquoi? Comment puis-je le résoudre? – lito

@lito: J'ai mis à jour ma réponse. Utilisez un compteur global ou statique ('drop.droppedCount'). – Zeta

Le problème est que la fonction dans la setTimeout se ferme sur la variable m , pas la valeur actuelle de celui-ci au moment de la création. La solution devrait être:

// ... var m = neighborhoods[i]; (function (myMarker) { setTimeout(function() { addMarker(myMarker); }, i * 500); }(m)); // ...

Source

2012-02-15 14:03:02 mfeineis

setTimeout() et la suppression des marqueurs sur google map

Répondre

Questions connexes