Javascript setTimeout with google maps markers

Question

好的，我的頁面通過JSON從數據庫中獲取了一些標記，並將它們放置在谷歌地圖上。它工作正常，但問題是要顯示這個標記一個接一個地有一個小滯後，而不是全部在同一時間。作爲谷歌地圖的API，即時通訊嘗試使用setTimeout（）方法...沒有進一步的成功。 ¿它與json響應不兼容？

這是代碼：

此功能檢索數據庫的所有標記數據，並能正常工作。

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

好吧，我在這裏有解決方案！ 問題是在線圖：圖，我必須把標記在所有的端部與超時

功能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; 
}