Google Maps v3：如何判断ImageMapType叠加层的贴图是否完成加载？ [英] Google Maps 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）; 
  

上述工作正常，覆盖层成功加载;似乎地图中没有发出任何事件来指示关于ImageMapType覆盖的状态的任何内容。

我希望地图在瓦片完成加载时至少会发出一个空闲事件，但据我所知，它不会。 >

如何加载ImageMapType叠加层？

编辑

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

另外，小猫。

解决方案

似乎没有开箱即用方式知道ImageMapType叠加层何时完成加载，但是由于来自Martin的建议在 Google Maps API v3论坛我能够添加自己的自定义事件，这是在图层完成加载时发出的。

基本方法是：

• 每次请求一个URL时，请将该URL添加到待处理URL的列表中


• 覆盖ImageMapType.getTile（），以便我们可以将onload事件侦听器添加到每个< img>元素。


• 当每个图片的加载事件触发时，从挂起的列表中删除该图像。


• 当待处理的URL列表为空时，会发出自定义的覆盖空闲事件。

我已经将代码复制到后代，但您可以在jsFiddle上看到它： http： //jsfiddle.net/6yvcB/22/

  //创建基地图
 var options = {
 zoom：3，
 center：new google.maps.LatLng（37.59，-99.13），
 mapTypeId：terrain
}; 
 var map = new google.maps.Map（$（＃map）[0]，options）; 
 
 //听地图发出空闲事件
 google.maps.event.addListener（map，idle，function（）{
 console.log（ map is idle）; 
}）; 
 
 //跟踪待处理的tile请求
 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 ++ ; 
 
 //将此URL添加到我们的待处理URL列表
 pendingUrls.push（url）; 
 
 //如果这是我们的第一个待处理的块，信号我们刚刚变得忙碌
如果（pendingUrls.length === 1）{
 $（overlay）.trigger（overlay-busy）; 
} 
 
 return url; 
}，
 tileSize：new google.maps.Size（256,256），
 isPng：true，
 opacity：0.60 
}）; 
 
 //收听我们的自定义事件
 $（overlay）.bind（overlay-idle，function（）{
 console.log（overlay is idle） ; 
}）; 
 
 $（overlay）.bind（overlay-busy，function（）{
 console.log（overlay is busy）; 
}）; 
 
 
 //复制原始的getTile函数，以便我们可以覆盖它，
 //但仍然使用原来的函数
 overlay.baseGetTile = overlay.getTile ; 
 
 //覆盖getTile，所以我们可以添加事件监听器来知道图像何时加载
 overlay.getTile = function（tileCoord，zoom，ownerDocument）{
 
 / /获取由开箱即用ImageMapType生成的DOM节点
 var node = overlay.baseGetTile（tileCoord，zoom，ownerDocument）; 
 
 //听节点内的任何图像完成加载
 $（img，node）.one（load，function（）{
 
 //从我们的待处理URL列表中删除图像
 var index = $ .inArray（this .__ src__，pendingUrls）; 
 pendingUrls.splice（index，1）; 
 
 //如果待处理的URL列表为空，则发出一个事件
 //表示正在完成加载
如果（pendingUrls.length === 0）{
 $（overlay ）.trigger（overlay-idle）; 
} 
}）; 
 
返回节点; 
}; 
 
 map.overlayMapTypes.push（overlay）; 
}）; 
  

I'm working with the Google Maps v3 API, and I have a custom overlay layer based on the ImageMapType class. I would like to show a loading indicator of some sort while the overlay's tiles are loading, but I don't see any way to know when they are finished.

The code to create the overlay looks similar to the following:

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

myMap.overlayMapTypes.push(myOverlay);

The above works just fine, and the overlay successfully loads; it just seems that no events are emitted by the map to indicate anything about the ImageMapType overlay's status.

I would expect the map to at least emit an "idle" event when the tiles are finished loading, but as far as I can tell it does not.

How may I know when the ImageMapType overlay is finished loading?

EDIT

I wrote a test case on jsFiddle: http://jsfiddle.net/6yvcB/ — Watch your console output for the word "idled" to see when the idle event fires. Notice that it never fires when you click the button to add an overlay.

Also, kittens.

解决方案

It would seem there's no "out of the box" way to know when an ImageMapType overlay has finished loading, but thanks to a suggestion from Martin over on the Google Maps API v3 Forums I was able to add in my own custom event that is emitted when the layer finishes loading.

The basic approach is:

• Every time a URL is requested, add the URL to a list of pending URLs
• Override ImageMapType.getTile() so that we can add "onload" event listeners to each <img> element.
• When each image's "load" event fires, remove that image from the list of pending URLs.
• When the list of pending URLs is empty, then emit our custom "overlay-idle" event.

I've copied the code below for posterity, but you can see it in action on 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);
});

这篇关于Google Maps v3：如何判断ImageMapType叠加层的贴图是否完成加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！