Google Maps API v3 удаляет маркеры из XML с задержкой?

Question

Я работаю над отображением нескольких партий маркеров с помощью API Карт Google (v3) и jQuery.

У меня это работает почти так же, как я хочу, но мне нужно было бы сбросить маркерыодин за другим, а не все сразу.

Я нашел этот пример в документации по картам Google, но я не могу понять, как интегрировать его со своим сценарием.

Может ли кто-нибудь помочь мне?

Вот мой код:

$(document).ready(function () {
    $("#map").css({
        height: 600,
        width: 958
    });
    var jeLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
    jeMap.init('#map', jeLatLng, 11);

    $("#showmarkers").click(function (e) {
        jeMap.placeMarkers('markers.xml');
    });
    $("#showmarkers2").click(function (e) {
        jeMap.placeMarkers('markers2.xml');
    });
});

var jeMap = {
    map: null
}

var UK = new google.maps.LatLng(21.192481, 0.0);

jeMap.init = function (selector, latLng, zoom) {
    var myOptions = {
        zoom: 2,
        center: UK,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        streetViewControl: false,
        mapTypeControl: false,
        backgroundColor: '#111'
    }
    this.map = new google.maps.Map($(selector)[0], myOptions);
}

var infoWindow = new google.maps.InfoWindow();

jeMap.placeMarkers = function (filename) {
    $.get(filename, function (xml) {
        $(xml).find("marker").each(function () {
            var name = $(this).find('name').text();
            var address = $(this).find('address').text();

            // create a new LatLng point for the marker
            var lat = $(this).find('lat').text();
            var lng = $(this).find('lng').text();
            var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            var marker = new google.maps.Marker({
                map: jeMap.map,
                position: point,
                animation: google.maps.Animation.DROP,
                icon: 'marker_pink.png'
            });

            var html = '<strong>' + name + '</strong.><br />' + address;
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(html);
                infoWindow.open(jeMap.map, marker);
            });
        });
    });
}

Я понимаю, что мне нужно как-то изменить функцию jeMap.placeMarkers, чтобы она проходила по каждому маркерус задержкой между циклами, просто не могу понять, как.

Answer 1

Как насчет этого:

jeMap.placeMarkers = function (filename) {
    //setup counter variable
    var counter = 0;
    $.get(filename, function (xml) {
        $(xml).find("marker").each(function () {
            var name = $(this).find('name').text();
            var address = $(this).find('address').text();

            // create a new LatLng point for the marker
            var lat = $(this).find('lat').text();
            var lng = $(this).find('lng').text();
            var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            //set timeout based on maps example
            setTimeout(function() {
                addMarker(point, address, name);
            }, counter * 200);

            //increment counter
            counter++;            
        });
    });
}

//add marker with specific point.
function addMarker(point, address, name){
    var marker = new google.maps.Marker({
        map: jeMap.map,
        position: point,
        animation: google.maps.Animation.DROP,
        icon: 'marker_pink.png'
    });

    var html = '<strong>' + name + '</strong.><br />' + address;
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(html);
        infoWindow.open(jeMap.map, marker);
    });
}