javascript - 谷歌地图 v3 : How to tell when an ImageMapType overlay's tiles are finished loading?

Question

我正在使用 Google Maps v3 API，并且我有一个基于 ImageMapType 类的自定义叠加层。我想在叠加层的图 block 加载时显示某种加载指示器，但我看不到任何方式来知道它们何时完成。

创建叠加层的代码类似于以下内容:

var myOverlay = new google.maps.ImageMapType({
    getTileUrl: myGetTileUrl,
    tileSize: new google.maps.Size(256, 256),
    isPng: true
});

myMap.overlayMapTypes.push(myOverlay);

以上工作正常，覆盖成功加载；似乎 map 没有发出任何事件来指示有关 ImageMapType 叠加层状态的任何信息。

我希望 map 在图 block 加载完成时至少发出“空闲”事件，但据我所知它不会。

我如何知道 ImageMapType 叠加层何时完成加载？

编辑

我在 jsFiddle 上写了一个测试用例:http://jsfiddle.net/6yvcB/ — 观察控制台输出中的“空闲”一词，以查看空闲事件何时触发。请注意，当您单击按钮添加叠加层时，它永远不会触发。

还有小猫。

Answer 1

似乎没有“开箱即用”的方法来知道 ImageMapType 叠加层何时完成加载，但感谢 suggestion from Martin在 Google Maps API v3 Forums 上我能够添加我自己的自定义事件，该事件会在图层完成加载时发出。

基本方法是:

• 每次请求 URL 时，将该 URL 添加到待定 URL 列表中
• 覆盖 ImageMapType.getTile() 以便我们可以向每个 元素添加“onload”事件监听器。
• 当每个图像的“加载”事件触发时，将该图像从待定 URL 列表中删除。
• 当待定 URL 列表为空时，发出我们自定义的“overlay-idle”事件。

我为后代复制了下面的代码，但您可以在 jsFiddle 上看到它的实际效果:http://jsfiddle.net/6yvcB/22/

// Create a base map
var options = {
    zoom: 3,
    center: new google.maps.LatLng(37.59, -99.13),
    mapTypeId: "terrain"
};
var map = new google.maps.Map($("#map")[0], options);

// Listen for the map to emit "idle" events
google.maps.event.addListener(map, "idle", function(){
    console.log("map is idle");
});

// Keep track of pending tile requests
var pendingUrls = [];

$("#btn").click(function() {
    var index = 0;   
    var urls = [ "http://placekitten.com/256/256", 
                 "http://placekitten.com/g/256/256",
                 "http://placekitten.com/255/255", 
                 "http://placekitten.com/g/255/255",
                 "http://placekitten.com/257/257", 
                 "http://placekitten.com/g/257/257" ];

    var overlay = new google.maps.ImageMapType({
        getTileUrl: function() { 
            var url = urls[index % urls.length];
            index++;

            // Add this url to our list of pending urls
            pendingUrls.push(url);

            // if this is our first pending tile, signal that we just became busy
            if (pendingUrls.length === 1) {
                 $(overlay).trigger("overlay-busy");   
            }

            return url; 
        },
        tileSize: new google.maps.Size(256, 256),
        isPng: true,
        opacity: 0.60
    });

    // Listen for our custom events
    $(overlay).bind("overlay-idle", function() {
        console.log("overlay is idle"); 
    });

    $(overlay).bind("overlay-busy", function() {
        console.log("overlay is busy"); 
    });


    // Copy the original getTile function so we can override it, 
    // but still make use of the original function
    overlay.baseGetTile = overlay.getTile;

    // Override getTile so we may add event listeners to know when the images load
    overlay.getTile = function(tileCoord, zoom, ownerDocument) {

        // Get the DOM node generated by the out-of-the-box ImageMapType
        var node = overlay.baseGetTile(tileCoord, zoom, ownerDocument);

        // Listen for any images within the node to finish loading
        $("img", node).one("load", function() {

            // Remove the image from our list of pending urls
            var index = $.inArray(this.__src__, pendingUrls);
            pendingUrls.splice(index, 1);

            // If the pending url list is empty, emit an event to 
            // indicate that the tiles are finished loading
            if (pendingUrls.length === 0) {
                $(overlay).trigger("overlay-idle");
            }
        });

        return node;
    };

    map.overlayMapTypes.push(overlay);
});