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

Question

我正在使用Google Maps API构建一个Web应用程序，需要平滑地缩放到某个区域，因此我使用setTimeout每秒增加一次缩放级别，但在网络不好的某些地方，地图图像加载得太慢，导致页面很快变成白屏......

我的问题是是否有可能预加载Google Maps的一部分（从一个点的缩放级别3到16）。

- wong2

---

我遇到了同样的问题。想要让缩放级别的更改更平滑... - flaudre

@Flaudre，你尝试过RASG的解决方案吗？ - wong2

也许对于网络连接较慢的用户来说，缓慢地放大可能不是最佳的用户体验？即使您预加载了所有数据，他们仍然需要在某个时候等待大量图像加载。 - dpix

@Flaudre 请检查答案。 - shukshin.ivan

Answer 1

你可能可以在隐藏的div或iframe中预加载它。

但是，你应该确保这不违反Google Maps/Google Earth APIs服务条款

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

(b) 禁止预取、缓存或存储内容。除非你临时、安全地、且不允许在服务范围之外使用该内容的情况下，否则你不得预取、缓存或存储任何内容；你只能存储：(i) 有限量的内容，以提高Maps API实现的性能；(ii) Maps APIs文档明确允许存储的任何内容标识符或密钥。例如，你不能使用该内容创建一个独立的“地点”数据库。

- RASG

---

看起来预加载它以提高性能是可以的。 - dalore

似乎ToS并不反对@RASG提供的解决方案。所以使用它，不用担心！伙计，在任何法庭上我们都支持你！ - behkod

Answer 2

编写一些代码

我刚刚基于RASG五年前的想法创建了一个脚本。让我们创建一个隐藏的地图，当它完全加载时，将其放大。我们一遍又一遍地这样做，直到缓存所有的缩放比例。可以在此处查看工作中的示例代码。我已经在右上角放置了一个信息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);
  }
});

它真的缓存了地图吗？

好的，清除浏览器缓存并打开Fiddle。

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

希望能对您有所帮助。

- shukshin.ivan

---

你可以通过前两个缓存的时间来计算慢速缩放的速度。 - shukshin.ivan

非常好！+1 鼓励你动手实践 :) - RASG

嗨，伊万，非常感谢你的努力。我太晚查看页面以至于无法奖励一些赏金。希望你能接受一个简单的点赞。 - flaudre