map api3 load xml marker delay

Question

私はtutorialをgoogle maps apiから作成し、マーカーとデータベースからphpを生成し、生成したXMLファイルをマップに追加しました。今私はsetTimeoutを持つ遅延を追加しようとしているので、この後に別のマーカーの後にドロップするexample。私は非常に初心者で、誰かが私にこのことを教えることができれば非常に嬉しいです！

downloadUrl("php/addLocations.php", function (data) { 
    var xml = parseXml(data); 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var profile_image = markers[i].getAttribute("myimage"); 
     var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + "<img src='uploads/" + profile_image + "' width='100px' />"; 
     var icon = customIcons[type] || {}; 
     var marker2 = new google.maps.Marker({ 
      map: bigmap, 
      position: point, 
      icon: icon.icon, 
      animation: google.maps.Animation.DROP, 
      shadow: icon.shadow 
     }); 
     bindInfoWindow(marker2, bigmap, infoWindowLoc, html); 
    } 
}); 


var infoWindowLoc = new google.maps.InfoWindow; 

function bindInfoWindow(marker2, bigmap, infoWindowLoc, html) { 
    google.maps.event.addListener(marker2, 'click', function() { 
     //openMarkerBox(); 
     // panning map 
     bigmap.panTo(marker2.position); 
     infoWindowLoc.setContent(html); 
     infoWindowLoc.open(bigmap, marker2); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; 

    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request.responseText, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function parseXml(str) { 
    if (window.ActiveXObject) { 
     var doc = new ActiveXObject('Microsoft.XMLDOM'); 
     doc.loadXML(str); 
     return doc; 
    } else if (window.DOMParser) { 
     return (new DOMParser).parseFromString(str, 'text/xml'); 
    } 
} 

function doNothing() { 
    alert("shit") 
} 

Answer 1

あなたexampleでコードを調べる場合さて、あなたが必要なすべてがあります。見てみましょう：

1 - ドロップマーカーボタンに装着されているonclickハンドラ：onclickため

`<button id="drop" onclick="drop()">Drop Markers</button>` 

オンラインドキュメントが提供されています：at this link。

2 - あなたの例からdrop()機能：setTimeout関数の

function drop() { 
    for (var i = 0; i < neighborhoods.length; i++) { 
     setTimeout(function() { 
      addMarker(); 
     }, i * 200); 
    } 
} 

オンラインドキュメントが提供されています：at this link。

3 - あなたの例からaddMarker()機能：

function addMarker() { 
    markers.push(new google.maps.Marker({ 
     position: neighborhoods[iterator], 
     map:  map, 
     draggable: false, 
     animation: google.maps.Animation.DROP 
    })); 
    iterator++; 
} 

google.maps.markerアニメーションのオンラインドキュメントが提供されています：at this link。

コードを歩いて、少し掘り下げてください。これを理解できるはずです。

Answer 2

さて、これがうまくいくと思われる解決策があります。 あなたの時間とtippsショーン4ありがとうございます。

var iterator = 0; 
var marker2; 
var customIcons = {art: {icon: 'img/art_marker.png',},graff: {icon: 'img/graff_marker.png',}}; 

downloadUrl("php/addLocations.php", function (data) { 
    var xml = parseXml(data); 
    var markers = xml.documentElement.getElementsByTagName("marker"); 

    for (var i = 0; i < markers.length; i++) { 

    myFunction(); 
    function myFunction() { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var profile_image = markers[i].getAttribute("myimage"); 
     var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); 

     setTimeout(function() { 
      addMarker(name, address, type, profile_image, point); 
}, i * 2200); 

    } 

} 
}); 

function addMarker (name, address, type, profile_image, point) { 

     var icon = customIcons[type] || {}; 
     var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + "<img src='uploads/" + profile_image + "' width='100px' />"; 
     var marker2 = new google.maps.Marker({ 
      map: bigmap, 
      position: point, 
      icon: icon.icon, 
      animation: google.maps.Animation.DROP, 
      shadow: icon.shadow 
     }); 
     bindInfoWindow(marker2, bigmap, infoWindowLoc, html); 
     iterator++; 
}