Google지도 마커가있는 자바 스크립트 setTimeout

Question

내 페이지가 JSON을 통해 데이터베이스에서 마커를 가져 와서 Google지도 맵에 배치합니다. 괜찮습니다.하지만 문제는이 마커를 하나씩 작은 지체와 동시에 표시하는 것이지 모두를 동시에 표시하는 것입니다. Google지도 API로, 나는 더 이상 성공하지 않고 setTimeout() 메서드를 사용하려고합니다. ¿ json 응답과 호환되지 않습니까?

이 기능은 DB의 모든 마커 데이터를 검색하고 잘 작동 :

는 여기 코드입니다.

function cargarsonidos(cuales) 
{  
$.getJSON("automatizar1.php",{que:cuales},function(json) 
     { 
      marcadores(json);   
     }); 
} 

응답 예 :

[{"id_marcador":"2","lat_marcador":"42.9912","long_marcador":"-7.54505","titulo_marcador":"Example data","tipo_marcador":"Example data","nombre_mp3":"example.mp3","dia":"no","descripcion":"Example data","url_video":"NO","video":"NO"}] 

그리고지도에 마커, 정보창과 장소를

var id=""; 
function marcadores(json) 
{ 

      $.each(json,function(index,value) 
      { 

     id ="a"+json[index].id_marcador; 
       var popid="pop"+json[index].id_marcador; 
       var lat=json[index].lat_marcador; 
       var long=json[index].long_marcador; 
       var titulo=json[index].titulo_marcador; 
       var icono=json[index].tipo_marcador; 
       var mp3=json[index].nombre_mp3; 
       var pagina=json[index].id_marcador; 
       var descripcion=json[index].descripcion; 
       var url_video=json[index].url_video; 
       var video=json[index].video; 

     id = new google.maps.Marker(
       { 

        position: new google.maps.LatLng (lat, long), 
        map: map, 
        title: titulo, 
        animation: google.maps.Animation.DROP, 
        icon: 'iconos/'+icono+'.png' 
       }); 

에서는 setTimeout (함수() {markersArray.push (생성 이제 기능 id);}, 200);

   if (video === 'SI') 
       { 
         popid = new google.maps.InfoWindow(
        { 

         content:'<h3>'+titulo+'</h3><br /><iframe width="420" height="315" src="'+url_video+'"  frameborder="0" allowfullscreen></iframe><div id="cambiar"><a href="paginas/contenido.php?sonido='+pagina+'" onMouseOver="mouse_in();" onMouseOut="mouse_out();"><br /><img src="imagenes/datos.png"></a></div>' 

         }); 
       } 

       google.maps.event.addListener(id,'click', function(){popid.open(map,id);});  

      }); 
} 

모든 것이 잘 작동하지만 각 마커 사이 ¿ 왜 지연은 없다?

Answer 1

먼저 루프에서 setTimeout을 사용하고 있습니다. 이것은 잘못된 것입니다.

시도해보십시오.

var index = 0; 
function CreateMarker(json) {  
    var id; 
    id = "a" + json[index].id_marcador; 
    var popid = "pop" + json[index].id_marcador; 
    var lat = json[index].lat_marcador; 
    var long = json[index].long_marcador; 
    var titulo = json[index].titulo_marcador; 
    var icono = json[index].tipo_marcador; 
    var mp3 = json[index].nombre_mp3; 
    var pagina = json[index].id_marcador; 
    var descripcion = json[index].descripcion; 
    var url_video = json[index].url_video; 
    var video = json[index].video; 

    markersArray[index] = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, long), 
    map: map, 
    title: titulo, 
    animation: google.maps.Animation.DROP, 
    icon :'iconos/'+icono+'.png' 
    }); 
    index = index + 1; 
    if(index != json.length) 
    setTimeout(function() { CreateMarker(json); }, 500); //Recursive 
} 

Answer 2

여기 해결책이 있습니다. 문제는 라인 맵에 있었다 :지도, i는 시간 제한

기능 marcadores (JSON) {

 $.each(json,function(index,value) 
     {  

      var id ="a"+json[index].id_marcador; 
      var popid="pop"+json[index].id_marcador; 
      var lat=json[index].lat_marcador; 
      var long=json[index].long_marcador; 
      var titulo=json[index].titulo_marcador; 
      var icono=json[index].tipo_marcador; 
      var mp3=json[index].nombre_mp3; 
      var pagina=json[index].id_marcador; 
      var descripcion=json[index].descripcion; 
      var url_video=json[index].url_video; 
      var video=json[index].video; 

      id = new google.maps.Marker(
      { 
       //position: new google.maps.LatLng(json[index].posicion_marcador), 
       position: new google.maps.LatLng (lat, long), 
       //map: map, 
       //title: '"'+json[index].titulo_marcador+'"', 
       title: titulo, 
       animation: google.maps.Animation.DROP, 

       icon: 'iconos/'+icono+'.png' 
      }); 
      markersArray.push(id); 

[...] 



     indice=0;  
     for (var i = 0; i<markersArray.length; i++) 
     { 
     setTimeout(function() {putMarkers();}, i * 100); 
     }  

}

function putMarkers() 
{ 
    markersArray[indice].setMap(map); 
    indice=indice+1; 
} 

모든 말에 마커를 넣어야 할