预加载Google地图叠加层

时间:2010-08-27 08:13:33

标签: javascript google-maps download

我正在尝试使用Google地图作为背景,并使用固定的叠加层。 Have a look-see

你可以看到问题 - 加载时,文字是不可读的。叠加层由Google的JS加载。如何在加载叠加层之前隐藏地图? (或者更好的解决方案?)

2 个答案:

答案 0 :(得分:4)

实际上,您可以使用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;
  }
});

Google只是显示来自服务器的图片,因此在显示地图之前将其加载到缓存中可以解决您的问题。

答案 1 :(得分:0)

我在v2 Api中看不到任何方式要么知道叠加层何时加载,要么隐藏地图直到完成叠加层。

load()事件在叠加层加载完成之前触发。我注意到叠加层非常大,为684KB。较小的叠加加载速度更快。

您可能还会考虑将背景图片或其他内容放在隐藏的联系人文本后面(仅授予5秒)。