Google지도 마커의 플롯간에 지연 추가

Question

마커의 각 플롯간에 1 초 지연을 추가해야합니다. 다음 코드를 작성했지만 제대로 작동하지 않습니다. 어떤 생각?

var latlng = new google.maps.LatLng(43,2.34); 
var myOptions = { 
    zoom: 7, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

for (var i=0, len=json.length; i<len; i++){ 
    obj = json[i]; 

    // Get lat/long and put them on the map 
    var lat = obj.latitude; 
    var long = obj.longitude; 

    display_marker(map, lat, long); 
} 

display_marker = function(map, lat, long){ 
    setTimeout(function(){}, 1000); 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(lat,long), 
    title: "Latitude: " + lat + "\nLongitude: " + long, 
    }); 
} 

Answer 1

거기에는 2 가지 문제가 있습니다.

첫 번째 것은 빈 함수로 setTimeout을 사용한다는 것입니다. 심지어 당신의 모든 마커가 ~ 후 생성됩니다이다에

display_marker = function(map, lat, long){ 
    setTimeout(function() { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(lat,long), 
     title: "Latitude: " + lat + "\nLongitude: " + long, 
    }); 
    }, 1000); 
} 

두 번째, 당신은 문제 하나를 해결하는 경우 귀하의 루프, 다른 후 display_marker 하나를 트리거합니다 : 코드는 함수 내에서 할 필요가

이

var obj, lat, long; 
for (var i=0, len=json.length; i<len; i++){ 
    obj = json[i]; 

    // Get lat/long and put them on the map 
    lat = obj.latitude; 
    long = obj.longitude; 

    display_marker(map, lat, long, i); 
} 

display_marker = function(map, lat, long, increment){ 
    setTimeout(function() { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(lat,long), 
     title: "Latitude: " + lat + "\nLongitude: " + long, 
    }); 
    }, increment * 1000); 
} 

힌트 : 내가했던 것을 볼 1000MS

이 문제를 해결하는 쉬운 방법은, 현재의 값을 전달하면 디스플레이 마커로 증가-var 및 당신의 setTimeout을 위해 그것을 곱하는 것입니다 변수 선언. 당신은 당신의 루프 내부의 변수를 재 선언했다

hint2 : 내 코드는 테스트되지 않은, 그러나 그것은 당신의 문제를 해결하는 방법을 잘 생각이 당신에게 제공해야합니다 당신이 계속하기 전에 실행을 차단 setTimeout를 기대 할 수있다처럼 보이는

Answer 2

후속 줄을 display_marker에서 실행하십시오. setTimeout은 실행 스택에 지정된 시간 동안 실행해야하는 프로세스를 추가하여 작동하지만 매우 정확하지는 않습니다.

값을 반복 할 때 display_marker에 대한 참조를 setTimeout으로 전달하면됩니다. http://ejohn.org/blog/how-javascript-timers-work/ :

setTimeout(function() { 
    display_marker(map, lat, long); 
}, 1000); 

는 존 레식은 내가 대단히 유용 발견했습니다 자바 스크립트 타이머에 대한 좋은 블로그 게시물을 썼다. setTimeout을 통해 매개 변수를 전달하는 방법에 대한 정보는 SO 대답 : https://stackoverflow.com/a/1190656/609206을 참조하십시오.