预加载谷歌地图覆盖图

Question

我正在尝试使用Google地图作为背景，并使用固定覆盖图。 Have a look-see。

您可以看到问题 - ，而正在加载，文本不可读。覆盖图由Google的JS加载。如何隐藏地图，直到覆盖图已经加载？ （或更好的解决方案？）

Answer 1

其实，你可以使用JavaScript来确保地图只显示在覆盖加载：

document.observe('dom:loaded', function() 
{ 
    if (GBrowserIsCompatible()) { 
    var overlaySrc = 'img/contact_map_overlay.png'; 
    var preloadOverlay = new Image(); 

    preloadOverlay.onload = function() { 
     var map = new GMap2(document.getElementById("map_canvas")); 
     map.setCenter(new GLatLng(-33.82568, 151.2180955505371), 14, G_PHYSICAL_MAP); 
     var mapTypeControl = new GMapTypeControl(); 
     var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(80, 250)); 
     map.addControl(new GSmallMapControl(), topRight); 
     var mapTarget = new GScreenOverlay(overlaySrc, new GScreenPoint(0.0, 0.0, 'fraction', 'fraction'), // screenXY 
     new GScreenPoint(0, 0),                        // overlayXY 
     new GScreenSize(1, 1, 'fraction', 'fraction')                   // size on screen 
    ); 
     map.addOverlay(mapTarget); 

     var pin = new GIcon(G_DEFAULT_ICON); 
     pin.image = "img/pin.png"; 
     pin.shadow = "no-shadow"; 
     pin.iconSize = new GSize(34, 43); 
     markerOptions = { 
     icon: pin 
     }; 

     var marker = new GMarker(new GLatLng(-33.82568, 151.240635), markerOptions); 
     map.addOverlay(marker); 
    } 

    preloadOverlay.src = overlaySrc; 
    } 
}); 

谷歌只显示来自服务器的形象，所以其显示在地图之前加载到缓存中将解决你的问题。

Answer 2

我没有看到任何方式在v2 Api要么知道覆盖何时加载，要么隐藏地图，直到它完成覆盖。

load（）事件在叠加完成加载之前触发。我注意到这个覆盖层在684KB处非常大。较小的覆盖加载更快。

您可能还会考虑将背景图片或背景图片放在联系我们正在遮盖的文本之后（仅授予5秒钟）。