Google将api v3拖放标记动画延迟映射

问题描述

我知道有关于此，我遵循它，但是我必须在我的代码中犯下一个错误，这里是：

  function dropAnim（lat，lng，name）{
 
 console.log（----+ lat + - + lng）; 
 
 var marker = new google.maps.Marker（{
 
 position：new google.maps.LatLng（lat，lng），
 map：map，
 title：名称，
动画：google.maps.Animation.DROP，
图标：imageCar，
 
}）; 
 
} 
 
 var counter = 0; 
 
 $ .get（'http://server.com/methods.php?m=loadPins'，函数（数据）{
 
 dataName = data.name.split （;）; 
 dataLat = data.lat.split（;）; 
 dataLng = data.lng.split（;）; 
 
 dataLength = dataName.length-1; 
 
 for（var i = 0; i< dataLength; i ++）{
 
 var lat = dataLat [i]; 
 var lng = dataLng [i]; 
 
 console.log（lat + - + lng）; 
 
 setTimeout（function（）{
 dropAnim（lat，lng ，dataName [i]）; 
}，counter * 400）; 
 
 counter ++; 
} 
 
}，json）; 
  

问题是它在同一个地方加载3个引脚。 dataLat和dataLng加载3倍不同，我可以看到，在控制台中，但是当我看到从insde函数中出来的控制台时，有3个相同的lat和lng（最后一个）。

  setTimeout（（function（ i）{
 return function（）{
 dropAnim（dataLat [i]，dataLng [i]，dataName [i]）; 
}; 
}）（i），计数器* 400）; 
  

你的问题是，当你的超时回调被调用时， i 变量已经具有 dataLength 值，因为您的循环已经在那段时间完成了。

I know there's a question about this Google Maps API v3 drop markers from XML with delay? and I followed it, but I had to made a mistake in my code, here it is:

function dropAnim(lat,lng,name) {

    console.log("---- " + lat + " - " + lng);

    var marker = new google.maps.Marker({

        position: new google.maps.LatLng(lat,lng),
        map: map,
        title: name,
        animation: google.maps.Animation.DROP,
        icon: imageCar,

    });

}

var counter = 0;

$.get('http://server.com/methods.php?m=loadPins', function(data) {

dataName = data.name.split(";");
dataLat = data.lat.split(";");
dataLng = data.lng.split(";");

dataLength = dataName.length-1;

for(var i=0;i<dataLength;i++) {

   var lat = dataLat[i];
   var lng = dataLng[i];

   console.log(lat + " - " + lng);

   setTimeout(function() {
      dropAnim(lat,lng,dataName[i]);
   }, counter * 400);

   counter++;
} 

},"json");

The problem is that it loads 3 pins in the exact same place. dataLat and dataLng load 3x times different and I can see that in console, but when I see what comes out in console from insde the function, there are 3 same lat and lng (the last one).

解决方案

Try like this:

 setTimeout((function(i) {
     return function(){
        dropAnim(dataLat[i],dataLng[i],dataName[i]);
     };
 })(i), counter * 400);

Your problem was, when your timeout's callback is called, i variable already has dataLength value, as your loop is already finished by that time.

这篇关于Google将api v3拖放标记动画延迟映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！