Javascript setTimeout with google maps markers

好的，我的页面通过JSON从数据库中获取了一些标记，并将它们放置在谷歌地图上。它工作正常，但问题是要显示这个标记一个接一个地有一个小滞后，而不是全部在同一时间。作为谷歌地图的API，即时通讯尝试使用setTimeout（）方法...没有进一步的成功。 ¿它与json响应不兼容？Javascript setTimeout with google maps markers

这是代码：

此功能检索数据库的所有标记数据，并能正常工作。

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);});  

      }); 
}

一切工作正常，但每个标记之间¿为什么没有延迟？

来源

2013-05-10 CLiFFF

增加您的超时间隔 - 200很小 – 2013-05-10 19:06:15

，您可能希望标记之间的延迟不是全部从循环执行的时间（可能是标记“数量的200倍”数字“） – geocodezip 2013-05-10 19:14:33

javascipt不会在setTimeout中等待循环。如果你没有解决这个问题，我会为你写一个脚本！你在这里？ – Mehmet 2013-05-10 19:42:40

首先你在循环中使用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 
}

来源

2013-05-10 19:57:16 Mehmet

谢谢4答案穆罕默德。它的工作原理，但只为第一标记！ – CLiFFF 2013-05-10 20:05:27

我添加了for循环你的代码，现在所有的标记显示...但没有超时！ – CLiFFF 2013-05-10 20:09:28

没有不使用for循环它不是必要的。它适用于1标记，因为id变量是全球..我把它放到setTimout请试试这个 – Mehmet 2013-05-10 20:11:59

好吧，我在这里有解决方案！问题是在线图：图，我必须把标记在所有的端部与超时

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

来源

2013-05-12 00:02:33 CLiFFF

Javascript setTimeout with google maps markers

回答

相关问题