隐藏 Google Maps v3 地图，在需要时显示答案

【问题标题】：Keep a Google Maps v3 Map hidden, show when needed隐藏 Google Maps v3 地图，在需要时显示
【发布时间】：2011-03-22 14:08:47
【问题描述】：

有没有一种方法可以防止从一开始就显示 Google Maps (JS, v3) 地图？我正在做一些预处理，并想显示我的“加载”微调器，直到一切顺利（更雄辩地说，隐藏地图——例如容器div——直到所有预处理完成——在哪一点，显示地图）。

连接地图的idle 事件并没有太大帮助，因为该事件发生时地图已经显示。

我知道容器 div 在加载后会被 GMaps 内联样式，我的第一个想法是清除 style 属性（同时监听 idle 事件），但看看会很有趣如果有一种方法可以创建地图并且在所有预处理完成之前不显示它。

也许通过使用new google.maps.Map 构造函数或MapOption 的参数？

对此有什么想法吗？

提前谢谢你！

【问题讨论】：

我使用了 $("#map_canvas").attr("style", "position:relative; visibility: hidden") 技巧，有效。
正如 Dr1Ku 所说。将地图渲染到不可见的 div，然后在第一个空闲事件上显示 div。请务必使用 addListenerOnce。

标签： google-maps google-maps-api-3

【解决方案1】：

还记得打电话：

google.maps.event.trigger(map, 'resize');

如果您更改了<div> 的大小。 display:none <div> 没有大小。

【讨论】：

这对我来说只是部分解决方案。我还必须调用map.fitBounds(bounds);，其中 bounds 是正确的 LatLngBounds 对象。
除了 matt 所说的之外，您还可以使用 panTo(location) 重新居中地图。
@dtanders 多么棒的补充！

【解决方案2】：

或者您可以像使用 css visablility 或 css opacity 一样隐藏它。

$("#GoogleMap").css({ opacity: 0, zoom: 0 });
initialize();

google.maps.event.addListener(map,"idle", function(){ 
     $('#Loader').hide();
     $("#GoogleMap").css({ opacity: 1, zoom: 1 });
});

【讨论】：

opacity:0 成功了，我试图显示：none，但效果不佳

【解决方案3】：

这对我有用。我正在使用 JQuery 库。

$(document).ready(function(){
    $('#Checkbox').click(function(){
        $('#googleMapDiv').toggle();
        initialize(); // initialize the map
    });
});

【讨论】：

嘿加布里埃尔。感谢这个非常简单有效的解决方案。像魅力一样工作！
请注意，这可能会每次都重新加载地图，并且对于地图 API v3，您每天可以加载地图元素的次数有限制。

【解决方案4】：

在地图首次渲染<div> 时显示隐藏地图的另一种方法是设置样式：可见性。

第一次隐藏时，使用visibility = hidden；显示使用visibility = visible

原因是：visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.

【讨论】：

【解决方案5】：

这对我来说很好，我使用 jquery 选项卡

setTimeout(function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter(new google.maps.LatLng(default_lat, default_lng));
        map.setZoom(default_map_zoom);
    }, 2000);

这个链接https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

【讨论】：

【解决方案6】：

这会起作用

    google.maps.event.addListener(map, "idle", function ()
    {
        google.maps.event.trigger(map, 'resize');
    });

【讨论】：

【解决方案7】：

更好的方法：

gmap.redraw = function() {
    gmOnLoad = true;
    if(gmOnLoad) {
        google.maps.event.trigger(gmap, "resize");
        gmap.setCenter(gmlatlng);
        gmOnLoad = false;
    }
}

在显示点击事件中：

$("#goo").click(function() {
  if ($("#map_canvas").css("display") == "none") {
    $("#YMapsID").toggle();
    $("#map_canvas").toggle();
    if (gmap != undefined) {
        gmap.redraw();
    }
  }
});

【讨论】：

我认为这个临时解决方案总比没有好。

【解决方案8】：

根据您在做什么，另一种可能性可能是在每个过程完成时将多个布尔值设置为 true。

例如：

如果您要等待正在运行的地理编码服务，则可以有一个名为地理状态

并且在地理编码器的结果部分将 GeoState 设置为 true，然后有一个定时函数检查是否所有服务都返回 true，当它们返回时，使地图可见。

【讨论】：