如何预加载谷歌地图的一些部分?

won*_*ng2 16 javascript performance google-maps preload google-maps-api-3

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

所以我的问题是可以预加载谷歌地图的某些部分(从3点到16点放大)

RAS*_*ASG 12

你可以将它预加载到隐藏的div或iframe中.

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

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

(b)没有预先获取,缓存或存储内容.您不得预先获取,缓存或存储任何内容,但您可以存储:(i)有限数量的内容,以便在您临时,安全地执行此操作时提高Maps API实施的效果不允许在服务之外使用内容的方式; (ii)Maps API文档特别允许您存储的任何内容标识符或密钥.例如,您不得使用内容来创建"地点"的独立数据库.

  • 大。没有任何解释的投票。 (2认同)

shu*_*van 5

编写一些代码

我刚刚根据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);
  }
});
Run Code Online (Sandbox Code Playgroud)

它真的缓存地图吗?

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

在此处输入图片说明

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

在此处输入图片说明

希望能帮助到你。