我正在使用 Google Maps API 构建一个网络应用程序，我需要平滑地放大一个区域，所以我使用 setTimeout 每秒增加缩放级别，但是在某些网络不好的地方，地图图像是加载太慢以至于页面很快变成了白页......
所以我的问题是可以预加载谷歌地图的某些部分（从 3 点缩放到 16 点）
【问题讨论】：
标签： javascript performance google-maps google-maps-api-3 preload
您可以将其预加载到隐藏的 div 或 iframe 中。
但你应该确保它不违反Google Maps/Google Earth APIs Terms of Service
10.1.3 对数据导出或复制的限制。
(b) 不预取、缓存或存储内容。您不得预取， 缓存或存储任何内容，但您可以存储：(i) 有限 以提高性能为目的的内容数量 您的 Maps API 实施，如果您临时、安全地这样做，并且 以不允许在本网站之外使用内容的方式 服务; (ii) Maps API 的任何内容标识符或密钥 文档特别允许您存储。例如，您必须 不要使用内容来创建独立的“地点”数据库。
【讨论】：
编写一些代码
我刚刚根据 RASG 5 年前的想法创建了一个脚本。让我们创建一个隐藏的地图，当它完全加载时，放大它。我们一次又一次地这样做，直到它缓存所有的缩放。工作的fiddle is here。我在右上角放置了一个信息div，以查看缩放进度。
// init the hidden map
var mapOptions = {
center: new google.maps.LatLng(center.lat, center.lng),
zoom: minZoom + 1
};
var preMap = new google.maps.Map(document.getElementById('map-canvas-hidden'), mapOptions);
// when the current hidden map is fully loaded, zoom it in
preMap.addListener('tilesloaded', function() {
$('#out').html('Zoom ' + preMap.getZoom() + ' preloaded');
// if there is zoom to zoom-in, do it after some rest
if(preMap.getZoom() < maxZoom) {
setTimeout(function(){
preMap.setZoom(preMap.getZoom() + 1);
}, 50);
}
});
它真的会缓存地图吗？
好吧，清除浏览器缓存并打开小提琴。
在浏览器网络活动中，我们可以看到大量图片正在下载。然后放大地图并再次观看活动。看起来所有的图像都是从缓存中加载的。
希望对你有帮助。
【讨论】：