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

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

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

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

myMap.overlayMapTypes.push(myOverlay);

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

我希望 map 至少在瓦片加载完成后发出“空闲”事件，但据我所知它没有。

我如何知道 ImageMapType 覆盖何时完成加载？

编辑

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

还有，小猫。

最佳答案

似乎没有“开箱即用”的方式来知道 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);
});

关于javascript - 谷歌 map v3 : How to tell when an ImageMapType overlay's tiles are finished loading?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7341769/