0

私はGoogleマップAPIからチュートリアルを作成し、データベースとphpからマーカーをロードし、生成されたxmlファイルをマップにロードしました。今、私はsetTimeoutで遅延を追加しようとしています. 初心者なので、どなたか教えていただけると嬉しいです！

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")
}
4

2 に答える 2

0

さて、あなたがあなたの例でコードを調べるならば、あなたが必要とするすべてはそこにあります。を見てみましょう：

1- [ドロップマーカー]ボタンonclickに接続されているハンドラー：

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

のオンラインドキュメントonclickが利用可能です：このリンクで。

2-drop()あなたの例の関数：

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

setTimeout関数のオンラインドキュメントは、このリンクから入手できます。

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アニメーションのオンラインドキュメントは、このリンクから入手できます。

コードをウォークスルーし、少し掘り下げると、これを理解できるはずです。

于 2012-05-01T00:58:37.733 に答える
0

さて、これがうまくいくように見える解決策です。Sean 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++;
}
于 2012-05-01T15:19:35.150 に答える