在调整网页大小之前，嵌入谷歌地图显示错误

Question

我正在尝试在我的网页中显示地图以获取其中的坐标。它工作正常，我可以拖放标记并在输入框中获取坐标。

但是当我加载网页时，问题出现了。一切都很好地展示了地图，在这里你可以看到地图的显示方式：

但是，如果在这一刻我调整网页的大小，我的意思是，如果是全屏，请将其设置为一半。如果它只是屏幕的一部分，或者使它变得更大或更小。然后，您将看到正确的地图：

（这不是同一个地方，我知道。我从2次重装中拍摄了图像）

我用HTML创建网页，但我称之为不同的网页。加载索引时，会出现一个带有此

的按钮

href:<a href="#openMap">

并且，显示的部分将是：

<div data-role="page"  id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
    blablabla
    <div data-role="content">
        <form action="">
            <div id="map_canvas" style="width:500px; height:300px"></div>
            blablabla

所有的div，形式......正确关闭。我有很多输入框和字段，我没有把它们放在这里。

然后，在我的谷歌地图脚本中，我有这个：

var map;
function initializeNewMap() {
  var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);

  var myOptions = {
     zoom: 14,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
      draggable: true,
      position: myLatlng, 
      map: map,
      title: "Your location"
  });

}

但我不知道为什么我需要调整大小。这是一种解决方法吗？

编辑：我添加更多信息：

我用这种方式调用包含地图的网页部分：

$(document).on("pageinit", '#openMap', function() {

我试图把

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

就在它之后但没有任何反应。

解：

我在其他问题中找到了解决方案（Google Maps v3 load partially on top left corner, resize event does not work，Ian Devlin帖子）：

正如一位用户所说，我需要调整地图大小。但只是那条线不起作用。我在初始化函数的末尾添加了这段代码：

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

所以它只是在显示地图后调用。

Answer 1

我也遇到过这个问题，我通过触发Google地图 resize 事件解决了这个问题。

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

<强>更新

var map;
function initializeNewMap() {
 // add your code
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  google.maps.event.trigger(map, 'resize');
}

希望你明白。

Answer 2

我遇到了类似的问题，但你看不到任何地图（整个方框都是灰色的）。

为我解决了这个问题，我意识到包含地图的div开始是隐藏的

display:none;

如果您改为使用

visibility:hidden;

div保持其大小但仍显示为隐藏，因此初始化时的地图使用其正确的高度和宽度，而不是0值

希望这有帮助！

Answer 3

如果您使用基于JavaScript的布局助手（例如Foundation Equalizer），则需要确保在加载地图之前地图容器具有确定的大小，这样您就不会获得臭名昭着的灰色地图和某些属性像center一样按预期工作 - 或者使用第三方插件的事件来触发修复地图的自定义回调。 E.g：

var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
    google.maps.event.trigger(map, 'resize');
});

Answer 4

我的地图隐藏在Twitter Bootstrap tab中，因此在地图初始化时不可见，因此我需要在选择标签时调用调整大小：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {                 
    google.maps.event.trigger(map, 'resize');
})

Answer 5

应如何解决：

您必须在容器（放置地图的位置）之后初始化地图才能看到，

请记住，加载和可见性不一样，您需要可见性。

就像，我有很多标签＆amp;最后一个标签包含地图， 我通过以下方式解决了这个问题：

$('#map-tab').click(function() {
    // init map
});

在这里，我首先确保容器获得可见性（点击该元素显示该部分包含地图）然后初始化地图

这对我来说很好;