javascript - 如何预加载谷歌地图的某些部分？

Question

我正在使用 Google Maps API 构建一个网络应用程序，我需要平滑地放大一个区域，所以我使用setTimeout每秒增加缩放级别，但是在某些网络不好的地方，地图图像加载速度太慢以至于页面快速翻到白页......

所以我的问题是是否可以预加载谷歌地图的某些部分（从 3 点缩放到 16 点）

Answer 1

您可能可以将其预加载到隐藏的 div 或 iframe 中。

但您应该确保它不违反Google Maps/Google Earth APIs 服务条款

10.1.3 对数据导出或复制的限制。

(b) 不得预取、缓存或存储内容。您不得预取、缓存或存储任何内容，除非您可以存储：(i) 有限数量的内容，以提高 Maps API 实施的性能，前提是您临时、安全且在不允许在服务之外使用内容的方式；(ii) Maps API 文档明确允许您存储的任何内容标识符或密钥。例如，您不得使用内容创建独立的“地点”数据库。</p>

Answer 2

做一些代码

我刚刚根据 RASG 5 年前的想法创建了一个脚本。让我们创建一个隐藏的地图，当它完全加载时，放大它。我们一次又一次地这样做，直到它缓存所有的缩放。工作小提琴就在这里。我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);
  }
});

它真的缓存地图吗？

好吧，清除浏览器缓存并打开小提琴。

在浏览器网络活动中，我们可以看到大量图片正在下载。然后放大地图并再次观看活动。看起来所有图像都是从缓存中加载的。

希望能帮助到你。