window.setTimeout(function(){不使用Google Maps Marker / XML

时间:2014-10-02 14:55:57

标签: jquery ajax xml google-maps-api-3 maps

我有一个问题是将我的数据库中的标记单独显示为“飞入”。

Ajax电话:

$.ajax({
            type: "GET",
            async: true,
            url: '<?php echo PATH;?>ajax/map_process.php',
            success: function(data){
                $(data).find("marker").each(function () {
                     //Get user input values for the marker from the form
                      var name      = $(this).attr('name');
                      var address   = '<p>'+ $(this).attr('address') +'</p>';
                      var type      = $(this).attr('type');
                      var point     = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));

                      //call create_marker() function for xml loaded maker
                      window.setTimeout(function() {
                      create_marker(point, name, address, false, false, false, "http://sanwebe.com/assets/google-map-save-markers-db/icons/pin_blue.png");
                      }, 1500);

                });
            }
        });

生成的XML:

<markers>
 <marker name="PLUS Berlin" address="Warschauer Platz 6" lat="52.503699" lng="13.448671" type="10245"/>
 <marker name="Minus Hotel" address="" lat="52.520007" lng="13.404954" type="0"/>
</markers>

create_marker函数:

//############### Create Marker Function ##############
function create_marker(MapPos, MapTitle, MapDesc,  InfoOpenDefault, DragAble, Removable, iconPath)
{                 
//new marker
var marker = new google.maps.Marker({
    position: MapPos,
    map: map,
    draggable:DragAble,
    animation: google.maps.Animation.DROP,
    title:"Hello World!",
    icon: iconPath
});

//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">'+MapTitle+'</h1>'+
MapDesc+ 
'</span>'+

'</div></div>');    


//Create an infoWindow
var infowindow = new google.maps.InfoWindow();
//set the content of infoWindow
infowindow.setContent(contentString[0]);


google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker); // click on marker opens info window 
});


if(InfoOpenDefault) //whether info window should be open by default
{
  infowindow.open(map,marker);
}
}

根据我的理解,这段代码应该让标记一个接一个地飞。好吧,它们不会立即出现......我应该把超时放在哪里?

1 个答案:

答案 0 :(得分:1)

所有标记都是在同一时间创建的(处理XML后1.5秒)。

如果您希望它们在不同时间掉落,请更改延迟。

i++
window.setTimeout(function() {
  create_marker(point, name, address, false, false, false, "http://sanwebe.com/assets/google-map-save-markers-db/icons/pin_blue.png");
}, (1500+(i*500)));