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: 新的 google.maps.Size(256, 256),isPng: 真});myMap.overlayMapTypes.push(myOverlay);以上工作正常，并且叠加层成功加载；地图似乎没有发出任何事件来指示有关 ImageMapType 叠加层状态的任何信息.
我希望地图至少在图块加载完成时发出空闲"事件，但据我所知并没有.
我如何知道 ImageMapType 覆盖何时完成加载?
编辑
我在 jsFiddle 上写了一个测试用例:
//创建底图变量选项 = {缩放:3，中心:新的 google.maps.LatLng(37.59, -99.13)，地图类型 ID:地形"};var map = new google.maps.Map($("#map")[0], options);//监听地图发出空闲"事件google.maps.event.addListener(地图，空闲"，函数(){console.log("地图空闲");});//跟踪待处理的 tile 请求var pendingUrls = [];$("#btn").click(function() {无功指数 = 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 覆盖 = 新的 google.maps.ImageMapType({getTileUrl:函数(){var url = urls[index % urls.length];指数++；//将此 url 添加到我们的待处理 url 列表中pendingUrls.push(url);//如果这是我们的第一个待处理的 tile，则表示我们刚刚变得忙碌如果(pendingUrls.length === 1){$(overlay).trigger("overlay-busy");}返回网址；},tileSize: 新的 google.maps.Size(256, 256),isPng: 真,不透明度:0.60});//监听我们的自定义事件$(overlay).bind("overlay-idle", function() {console.log("overlay 空闲");});$(overlay).bind("overlay-busy", function() {console.log("overlay 忙");});//复制原始的 getTile 函数，以便我们可以覆盖它，//但仍然使用原来的函数overlay.baseGetTile = overlay.getTile;//覆盖 getTile 以便我们可以添加事件侦听器以了解图像何时加载overlay.getTile = 函数(tileCoord，缩放，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屋！
