Google Maps JS api v3 一个一个地拖放标记

Question

我知道已经有几个关于这个主题的问题，例如 Google maps api v3 drop markers animation with delay，但是在尝试了无数个小时之后，我运行自己陷入了死胡同。

我正在附近搜索用户位置附近的公园，并希望一次放入 20 个结果。如果我将每个结果的位置硬编码到一个数组中，我就可以使用它了，但是在调用 returns nearbySearch.

的函数时，我的 setTimeout 似乎不起作用

这是我当前的代码：

var map;
var infowindow;
var service;

function initialize() {

    // Create an array of styles.
    var styles = [{
        stylers: [{
            hue: '#0091ff'
        }, {
            saturation: 5
        }, {
            "gamma": 0.5
        }, {
            "lightness": 30
        }]
    }];

    // Create a new StyledMapType object, passing it the array of styles,
    // as well as the name to be displayed on the map type control.
    var styledMap = new google.maps.StyledMapType(styles, {
        name: 'Styled Map'
    });

    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Found you :)'
            });

            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: pos,
                zoom: 12,
                mapTypeControl: false,
                zoomControl: false,
                streetViewControl: false
            });

            var request = {
                location: pos,
                radius: 20000,
                keyword: ['Dog parks']
            };
            infowindow = new google.maps.InfoWindow();
            service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);
            service.getDetails(request, callback);

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        //setTimeout(function() {
                        createMarker(results[i]);
                        //}, i * 200);
                    }
                }
            }

            function createMarker(place) {
                var image = 'img/marker.png';
                var marker = new google.maps.Marker({
                    map: map,
                    animation: google.maps.Animation.DROP,
                    icon: image,
                    position: place.geometry.location
                });
                var request = {
                    reference: place.reference
                };

                service.getDetails(request, function (details, status) {
                    google.maps.event.addListener(marker, 'click', function () {

                        if (status == google.maps.places.PlacesServiceStatus.OK) {

                            // Replace empty spaces in navigation link with + symbols
                            var navLink = details.formatted_address;
                            navLink = navLink.replace(/\s/g, "+");
                            $('.navLink').html(navLink);

                            // Match Rating bar width to rating number
                            var ratingWidth = (details.rating * 20) + "px";
                            $('.rating-bar > span').css('width', "'" + ratingWidth + "'");

                            var contentStr = '<h5 class="info-window-title">' + details.name + '</h5><ul class="info-window">';
                            if ( !! details.rating) contentStr += '<li>Rating:&nbsp;<div class="rating-bar"><span style=width:' + ratingWidth + '></span></div><strong>' + details.rating + '</strong></li>';
                            if ( !! details.open_now) contentStr += '<li class="open-now">' + details.open_now + '</li>';
                            contentStr += '<li>' + details.formatted_address + '</li>';
                            contentStr += '<li class=gray>' + details.types + '</li>';
                            // Check for platform to send appropriate app link
                            if ((navigator.platform.indexOf("iPhone") != -1)) {
                                contentStr += '<li class="link"><a class=navLink href=http://maps.apple.com/?daddr=Current+Location&saddr=' + navLink + '><i class="fa fa-automobile"></i> Get Directions</a></li>';
                            } else {
                                contentStr += '<li class="link"><a class=navLink href=https://www.google.com/maps/dir/Current+Location/' + navLink + '><i class="fa fa-automobile"></i> Get Directions</a></li>';
                            }

                            if ( !! details.formatted_phone_number) contentStr += '<li class="link"><a href="tel:' + details.formatted_phone_number + '"><i class="fa fa-phone"></i> ' + details.formatted_phone_number + '</a></li>';
                            contentStr += '</ul>';
                            infowindow.setContent(contentStr);
                            infowindow.open(map, marker);
                        } else {
                            var contentStr = "<h5>No Result, status=" + status + "</h5>";
                            infowindow.setContent(contentStr);
                            infowindow.open(map, marker);
                        }
                    });
                });
            }

            //Associate the styled map with the MapTypeId and set it to display.
            map.mapTypes.set('map_style', styledMap);
            map.setMapTypeId('map_style');

            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }

}
google.maps.event.addDomListener(window, 'load', initialize);

错误： "place" 未定义。参考：位置：place.geometry.location

Answer 1

您可以使用 setInterval 完成 - 请参阅 WindowTimers.setInterval()

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {

    var center = new google.maps.LatLng(59.32522, 18.07002);

    var mapOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var request = {
        location: center,
        radius: '5000',
        types: ["store", "bank"]
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
}

function callback(results, status) {

    if (status == google.maps.places.PlacesServiceStatus.OK) {

        var i = 0;
        var interval = setInterval(function () {

            setMarker(results[i]);
            i++;

            if (i === results.length) clearInterval(interval);

        }, 1000);
    }
}

function setMarker(place) {

    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
    });
}

initialize();

JSFiddle demo

Google Maps JS api v3 一个一个地拖放标记

Google Maps JS api v3 drop markers one by one with delay

javascript

google-maps-api-3

google-maps-markers

google-places-api