我正在使用 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/ — 观察控制台输出中的“空闲”一词,以查看空闲事件何时触发。请注意,当您单击按钮添加叠加层时,它永远不会触发。
还有小猫。
最佳答案
似乎没有“开箱即用”的方法来知道 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 - 谷歌地图 v3 : How to tell when an ImageMapType overlay's tiles are finished loading?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7341769/