Question

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

查看此link

在Box类型中，假设OMDB是机场的icao代码，然后按回车键。

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

仅供参考我在Windows XP上运行Google Chrome，Firefox和IE8。有没有办法强制完成地图的渲染？这是一个非常不稳定的问题，它可能与我的代码有关，还是主机问题？或谷歌只是不喜欢我？：（

编辑：看到旁边那个丑陋的补丁。它的未渲染区域也应该渲染地图。没有任何放大和平移有助于明确这一点：（

Answer 1

我无法重现您遇到的问题，但它看起来与我在google地图中看到的另一个问题类似。

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

Answer 2

是的，你必须提供容器DIV的实际像素高度和宽度。事实上，这已在Google API中详细说明。

通过使用这样的东西：

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

而不是

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

你将免费回家！

Answer 3

据我所知，它在Google Chrome中的OS X 10.6.2上运行良好。

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

唯一的问题是，哥本哈根机场距离您的申请所在地不远。洛杉矶国际机场位于海洋中间; - ）

编辑：
我看到了你的屏幕截图，在我看来谷歌地图不会呈现搜索和搜索结果窗格所覆盖的地图部分，然后在隐藏搜索窗格时没有正确触发渲染。

我无法在Google Maps API中找到合适的渲染触发器，但我认为您应该尝试以编程方式放大或缩小地图或将地图中心移动到其他地方并返回，以便强制重新渲染地图。

或者，您可以尝试手动触发一些您认为可能会导致重新渲染地图的事件，例如google.maps.event.trigger(map, 'resize')。

我知道这些建议感觉像是一种糟糕的黑客攻击方式，并且我非常不确定它是否会起作用，但它是我最好的镜头; - ）

Answer 4

当我尝试在对话框中加载谷歌地图时，我遇到了同样的问题。这就像谷歌地图没有正确呈现。所以我找到了可能解决你问题的解决方案。

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

import numpy as np
from scipy.stats import kurtosis, skew

x_random = np.random.normal(0, 2, 10000)

x = np.linspace( -5, 5, 10000 )
y = 1./(np.sqrt(2.*np.pi)) * np.exp( -.5*(x)**2  )  # normal distribution

import matplotlib.pyplot as plt

f, (ax1, ax2) = plt.subplots(1, 2)
ax1.hist(x_random, bins='auto')
ax1.set_title('probability density (random)')
ax2.hist(y, bins='auto')
ax2.set_title('(your dataset)')
plt.tight_layout()

示例：

我已经通过ajax调用加载了map，然后初始化了对话框，最后触发了google map resize事件。

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

Answer 5

如果您使用的是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)
});

Answer 6

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

当div更改时，开发人员应在地图上触发此事件尺寸：google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）

诀窍是知道何时调用它，这取决于您的代码将是情境。如果您正在使用Bootstrap 3 Modals，这可以很好地工作。

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

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

Answer 7

我知道这个问题有点陈旧，但我遇到了类似的问题。但是，就我而言，我在iframe内将地图设置为从正文加载（用于全屏效果）。

就像杰伊在答案中提到的那样，必须指定宽度和高度，这是我当时没有做过的。

我改变了：

<body style="margin:0;">

为：

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

现在它可以在Chrome，Firefox和Internet Explorer 10上完美加载。

希望这可以帮助那些也遇到过这个问题的人。您必须指定宽度和高度才能在不同的客户端之间工作。

此致

Answer 8

我遇到了同样的问题并通过简单地将包含div的宽度更改为“px”而不是“％”（例如width =“700px”而不是“80％”）来解决它。我想谷歌可以通过这种方式做更好的尺寸计算......我不保证这一点，但它帮助了我

Answer 9

我有这个问题，我发现唯一的解决方案（在我的实例中）是在元素之后触发内联调整大小。我不能说为什么，但我找到了一个线程，有人也有这个解决方案。（抱歉没有参考。）我的设置有点不同;它来自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>

Answer 10

在我的情况下，Mac设备上的问题相同： Safari 5.1.7（Os Windows 10 [抱歉]） Safari 5.1（Ipad 1 [很抱歉]） Safari 10（Iphone 6 Plus）在这里我的解决方案适合我： 1）捕获浏览器宽度detect.min.js 2）改变attr样式宽度参数 3）调整地图

＆＃13;

/* 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 */

＆＃13;

Answer 11

手动设置地图中心时，我遇到了同样的问题。我通过以下代码解决了该问题：

Bgf_filtered

Answer 12

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);

}

Google地图无法在网页上完全呈现？

12 个答案: