Google地图无法在页面上完全渲染？

问题描述：

我在我的页面上有一个搜索窗格的谷歌地图我建立了自己，可以随意显示和隐藏。它涵盖了像一边可以说200个地图的像素。事情是，当我调整我的地图的大小时，窗格重叠的区域是不被渲染的，即地图由于某种原因不会在那里渲染。Google地图无法在页面上完全渲染？

看看这个link

在箱型可以说OMDB这是一个机场，然后按回车的ICAO代码。

结果显示，您会看到窗格。现在单击全屏链接，然后单击机场选项卡以使面板消失 - 现在看到地图的一部分根本没有渲染过......我必须拖动地图并且只部分渲染该地区。我该如何解决它？

仅供参考我已经在Windows XP上的Google Chrome，Firefox和IE8上运行它。有没有办法像强制完成渲染地图等？这是一个相当不稳定的问题，它可能与我的代码有关，还是它是一个主机问题？或者Google不喜欢我？ :(

编辑：见上一面的大丑补丁它在映射应该已经呈现，以及未呈现的区域缩放没量和平移有助于明确这:(

答

我不能重现问题你有，但它看起来类似于我已经看到谷歌地图的另一个问题。

它看起来像你可能会违反谷歌地图的方式确定哪些瓷砖在视图中。它只会计算一次，第一次将地图加载到div中时，如果div增长，则不会绘制足够的地图。幸运的是，这很容易处理。任何时候容器可能已经调整大小，在地图实例上使用checkResize()方法，并且裁剪区域将从容器的当前大小重新计算。

在Internet Explorer中尝试它 - 它有时在Firefox中做了很多，但有时它不 – Ali 2009-11-22 07:33:37

注意这适用于旧版Google Maps API版本，但不是v3。phidah的答案适用于v3版本，以及map.setCenter和map.setZoom以重新映射并重新缩放地图。 – 2013-02-25 17:48:53

至少在api v3中不存在checkResize。使用google.maps.event.trigger（map ，'resize'）;取而代之的是 – 2015-05-14 12:21:23

答

为。据我可以看到它正常工作在OS X 10.6.2中的谷歌浏览器。

http://i33.tinypic.com/sfe3ah.png

唯一的问题是，哥本哈根机场是无处您的应用程序意味着位置附近。涣散是的中间海洋;-)

编辑：
我看到了你的截图，在我看来，Google地图不会呈现搜索和搜索结果窗格所覆盖的地图部分，并且之后渲染不会被正确触发隐藏搜索窗格。

我还没有能够在Google Maps API中找到像样的渲染触发器，但我认为您应该尝试像编程式地放大或缩小地图或将地图中心移动到其他地方或背面，以便可能会强制重新渲染地图。

或者，您也可以尝试手动触发一些你认为可能掀起地图的重新描绘的事件，例如google.maps.event.trigger(map, 'resize')。

我知道这些建议感到使它工作的一个可怕的黑客攻击方式，我非常不确定是否会工作，但它是我最好的拍摄;-)

那么所有的位置都开发起来了：-S需要解决这个问题。它很不稳定，因为在很多时候，当你想浏览它时，搜索面板出现在右侧的一个巨大的无条状补丁... – Ali 2009-11-17 04:54:47

@phidah - 你没听见？加利福尼亚州坠入大海，因此LAX的位置现在是正确的。 :-p – JasCav 2009-11-17 05:19:26

哦，是的，没错，但是2012年已经？ ;-) – phidah 2009-11-17 05:30:01

答

我有同样的问题，并解决了它简单地通过改变含div来的“PX”，而不是“％”（e的宽度。g width =“700px”而不是“80％”）。我猜Google可以用这种方式做更好的尺寸计算......我不保证这一点，但它帮助我

答

是的，您必须提供容器DIV的真实像素高度和宽度。这实际上在Google API中有详细介绍。

通过使用像这样的：

<div id="map_canvas" style="width:500px;height:500px;"></div>

代替

<div id="map_canvas"></div>

你就可以回家免费的！

I ju被这个咬了！百分比大小不起作用，指定像素大小。 – Simon 2012-11-03 18:33:35

只要你在地图上放置一个resize事件处理程序，任何东西都应该可以工作。我大量使用这个响应式网站，它非常完美无瑕。但是，在其他情况下，尽量避免调整地图的大小，而不要调整窗口的大小，因为它很重。 – Johnride 2014-12-15 20:46:12

我相信这应该是被接受的答案 – 2015-08-20 12:42:05

答

如果您使用的是jQuery插件goMap，那么你应该使用：

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

尽管你应该在一个事件，以便运行显示地图时，这个包起来。这是我如何做到这一点在我的代码：

$(document).on('click', '#mapClicker', 'initmap', function() { 
    setTimeout(function() { 
     google.maps.event.trigger($.goMap.map, 'resize'); 
     $.goMap.fitBounds(); 
    }, 100) 
});

答

我有这个问题，我发现的唯一的解决方案（在我的实例）是触发元素之后的调整大小的内联。我不能说为什么，但我发现一个线程，有人也有这个解决方案。（抱歉，没有参考）我的设置有点不同;它来自jQueryMobile注入页面，所以后期实例化可能与我的问题有关。希望这有助于某人。

<div id="my-map"></div> 
<script type="text/javascript"> 
    $('#my-map').height($("#my-map-container").height()); 
    $('#my-map').width($("#my-map-container").width()); 
    google.maps.event.trigger($('#my-map'), 'resize'); 
</script>

答

function initialize(lon,lat) { 
var largeLatlng = new google.maps.LatLng(lon,lat); 
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId:  google.maps.MapTypeId.ROADMAP}; 
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions); 
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"}); 

google.maps.event.addListenerOnce(largeMap, 'idle', function(){ 
    google.maps.event.trigger(largeMap, 'resize'); 
    largeMap.setCenter(largeLatlng); 
}); 
largeMarker.setMap(largeMap); 

}

答

在谷歌地图V3，你需要魔法的点点记录在这里： https://developers.google.com/maps/documentation/javascript/reference#Map 下事件

开发人员应在地图上触发该事件时，DIV改变 size：google.maps.event.trigger（map，'resize'）

诀窍是知道当来调用这将取决于您的代码情境。如果你使用的是Bootstrap 3 Modals，这个效果非常好。

$("#modal-map") 
    .modal() 
    .on("shown.bs.modal", function() { 
     google.maps.event.trigger(gmap, 'resize'); 
    });

哪里gmap是您创建的google.maps.Map对象。

已批准，这是v3中的方法。 – 2015-05-14 12:21:09

答

我知道这个问题有点老了，但我刚碰到类似的问题。但是，在我的情况下，我在iframe内设置了要从身体加载的地图（对于全屏效果）。

就像周杰伦在他的回答一宽度和高度必须指定，我没有那么做提及。

我改变：

<body style="margin:0;">

到：

<body style="margin:0;width:100%;height:100%">

，现在它在Chrome，Firefox和Internet Explorer 10完全加载。

希望这可以帮助那些也遇到过这个问题的人。您需要必须指定宽度和高度它可以跨不同的客户端。

问候

答

在我的情况下，对Mac设备同样的问题：的Safari 5.1.7（Windows操作系统的10 [对不起]） Safari浏览器5.1（新iPad 1旧对不起]） Safari浏览器10（iPhone 6加）这里我为我解决工作： 1）捕获浏览器的宽度detect.min.js 2）改变ATTR风格宽度参数 3）调整地图

/* Of course insert detect.min.js and Jquery in your HTML ;)*/ 
 
var user = detect.parse(navigator.userAgent); 
 
var browserFamily=user.browser.family; 
 
var browserVersion=user.browser.version; 
 
if (browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") { 
 
    canvasWidth = $(window).width(), 
 
    $(".macarte").attr("style","width:"+canvasWidth+"px") 
 
    google.maps.event.trigger(map, 'resize'); 
 
} 
 
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */

答

我面对同样的问题，当我试图在对话框中加载谷歌地图。这就像谷歌地图没有正确渲染。所以我找出下面的解决方案，可能会解决您的问题。

我已经在初始化对话框后触发了Google地图调整大小事件，请检查下面的剪切代码。

google.maps.event.trigger(map, 'resize', function() { 
    // your callback content 
});

例子：

我已加载地图通过Ajax调用初始化，然后对话，最后引发谷歌地图调整事件。

$.ajax({ 
    url:"map.php", 
    type:"POST", 
    success:function(data){ 
     $("#inlineEditForm").html(data); 

     $('#inlineEditPopUp').dialog('open'); 
     google.maps.event.trigger(map, 'resize', function() { 
      // your callback content 
     }); 
    } 
});

Google地图无法在页面上完全渲染？

相关推荐