setTimeout marker animation - 아무것도 작동하지 않는 것 같습니다.

Question

이것을 읽어 주셔서 감사합니다 ...

저는 꽤 기본적인 자바 스크립트 문제를 해결하기 위해 3 일 동안 검색하고 실험 해 왔습니다.

45 개의 마커가있는 Google지도를 만들고 있습니다. 마커 :

• 는 MarkerClusterer 유틸리티
• 를 사용하여 클러스터 된 멋지게 장소 때 페이지가로드로 (각각 다른 이미지를 표시합니다)
• 모든 "드롭"는 정보창을 엽니 다 클릭 할 수 있습니다.

지금까지 그렇게 좋았습니다.

"setTimeout"함수를 적용하여 마커를 순차적으로 삭제하는 것이 문제입니다. 나는 수십 개의 변형을 시도했지만 아무것도 작동하지 않습니다.

저는 초보자입니다. 어떤 도움도 대단히 감사하겠습니다! 당신의 배열을 생성, 한 번에

var locations = [ 
[39.11009, -120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'], 
[37.77493, -122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'], 
[48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'], 
[48.77734, -121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'], 
[49.35365, -123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>'] 
]; 

var map; 
var markers = []; 
var mc; 
var mcOptions = { 
    gridSize: 20, 
    maxZoom: 15 
}; 

map = new google.maps.Map(document.getElementById("map_canvas"), { 
zoom: 3, 
center: new google.maps.LatLng(31.65338, -40.42969), 
mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

mc = new MarkerClusterer(map, [], mcOptions); 

var infowindow = new google.maps.InfoWindow(); 

google.maps.event.addListener(map, 'click', function() { 
infowindow.close(); 
}); 

var marker; 
var i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
    animation: google.maps.Animation.DROP, 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][2]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 

mc.addMarkers(markers, true); 

markers.push(marker); //push local var marker into global array 

} 

Answer 1

대신의 MarkerClusterer 모든 마커를 추가 :

여기 http://www.domatchaworld.com/googlemap6.html

코드입니다 :

당신은에지도의 단순화 된 버전을 볼 수 있습니다 다음 마커를 움직이게합니다 (코드를 붙여 넣고 끝에 주석을 추가했습니다 ...) :

var locations = [ 
    [39.11009, - 120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'], 
    [37.77493, - 122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'], 
    [48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'], 
    [48.77734, - 121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'], 
    [49.35365, - 123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>'] 
]; 

var map; 
var markers = []; 
var mc; 
var mcOptions = { 
    gridSize: 20, 
    maxZoom: 15 
}; 

map = new google.maps.Map(document.getElementById("map_canvas"), { 
    zoom: 3, 
    center: new google.maps.LatLng(31.65338, - 40.42969), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

mc = new MarkerClusterer(map, [], mcOptions); 

var infowindow = new google.maps.InfoWindow(); 

google.maps.event.addListener(map, 'click', function() { 
    infowindow.close(); 
}); 

var marker; 
var i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
     animation: google.maps.Animation.DROP, 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][2]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 

    //don't add to cluster yet 
    //mc.addMarkers(markers, true); 

    markers.push(marker); //push local var marker into global array 

} 

// now animate and add to cluster 
(function animateNextMarker() { 
    if (markers.length > 0) { 
    mc.addMarker(markers.pop(), true); 
    setTimeout(animateNextMarker, 250); 
    } 
})(); 

호프가 도와 드리겠습니다.