Google地图上的自定义叠加层

Question

如何仅在绘制所有标记之前显示进度轮？ 大约有50个地址，每个函数都要经过jquery并进行地理编码和绘图作为标记，我只需要显示进度轮，直到所有这些绘图都被绘制出来，然后隐藏进度轮并与所有制造商一起显示地图。

 var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(42.095287, -79.3185139);
        var myOptions = {
          maxZoom: 14,
          zoom: 9,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
            createOverlay();
       }

    function codeAddress() {
        var infowindow = new google.maps.InfoWindow({}); 
        $('.LocationAddress').each(function() {
            var addy = $(this).text();
            geocoder.geocode( { 'address': addy}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,               
                        title:addy,
                    });

                 //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>'
                                            +'<div id=\"LeftInfo\">'+ "Hello World!"
                                            +'</div>'+'</div>'); 
                    infowindow.open(map, this); 
                });  
             }  
            });//Geocoder END

        });
    }

        subOverlay.prototype = new google.maps.OverlayView();
        //constructor for subOverlay
        function subOverlay(bounds, image, map) {
            // Now initialize all properties.
            this.bounds_ = bounds;
            this.image_ = image;
            this.map_ = map;
            this.div_=null;
            // Explicitly call setMap() on this overlay
            this.setMap(map);
        }

        //Adding elements to overlay
        subOverlay.prototype.onAdd = function() {
            // Create the DIV and set some basic attributes.
            var div = document.createElement('DIV');
            div.style.borderStyle = "none";
            div.style.borderWidth = "0px";
            div.style.position = "absolute";

            var img = document.createElement("img");
            img.src = this.image_;
            img.style.width = "50px";
            img.style.height = "50px";
            div.appendChild(img);

            // Set the overlay's div_ property to this DIV
            this.div_ = div;

            // We add an overlay to a map via one of the map's panes.
            // We'll add this overlay to the overlayImage pane.
            var panes = this.getPanes();
            panes.overlayImage.appendChild(div);
        }

        //drawing overlay on map
        subOverlay.prototype.draw = function() {
            var overlayProjection = this.getProjection();
            var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
            var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

            // Resize the image's DIV to fit the indicated dimensions.
            var div = this.div_;
            div.style.left = sw.x + 'px';
            div.style.top = ne.y + 'px';
            div.style.width = (ne.x - sw.x) + 'px';
            div.style.height = (sw.y - ne.y) + 'px';
        }
        //function create overlay
        function createOverlay()
        {
            var swBound = new google.maps.LatLng(14, -14);
            var neBound = new google.maps.LatLng(14, -14);
            var bounds = new google.maps.LatLngBounds(swBound, neBound);

            // Photograph courtesy of the U.S. Geological Survey
            var srcImage = 'http://i276.photobucket.com/albums/kk35/cat_being/GIF%20Movie%20Gear/th_progress_wheel.gif';
            overlay = new subOverlay(bounds, srcImage, map);
        }

Answer 1

使用Google Map事件idle 。

就像是：

google.maps.event.addListener(map, 'idle', function() {

    // Hide the loader now.

});

实际上，我的地图项目第一次完成加载时，我只会执行一次操作。 喜欢：

var init = true;
google.maps.event.addListener(map, 'idle', function() {

    if(init){ init = false;
        // init only idle actions
    }
    // every idle actions

});