45

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

但是当我加载网页时，我的问题就来了。除了地图，一切都显示得很好，在这里您可以看到地图的显示方式：

错误的地图

但是如果此时我调整网页的大小，我的意思是，如果它是全屏的，就把它放一半。或者如果它只是屏幕的一部分，就让它变得更大或更小。然后，您将看到正确的地图： 正确的地图

（这不是同一个地方，我知道。我从 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');

就在它之后，但什么也没发生。

解决方案：

我在其他问题中找到了解决方案（谷歌地图 v3 部分加载在左上角，调整大小事件不起作用，Ian Devlin 帖子）：

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

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

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

4

5 回答 5

19

我也遇到过这个问题，我通过触发谷歌地图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');
}

希望你能理解。

于 2013-09-25T11:12:54.880 回答
9

我有一个类似的问题，但你看不到任何地图（整个盒子都是灰色的）。

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

display:none;

如果您改为使用

visibility:hidden;

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

希望这可以帮助！

于 2016-05-05T11:01:27.807 回答
0

应该如何修复：

您必须在容器（放置地图的位置）可见后初始化地图，

请记住，加载和可见性是不同的，您需要可见性。

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

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

在这里，我首先确保容器具有可见性（因为单击该元素会显示包含地图的部分）然后初始化地图

这对我来说很好；

于 2017-11-22T11:29:21.427 回答
0

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

var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
    google.maps.event.trigger(map, 'resize');
});
于 2016-09-01T08:30:56.153 回答
0

我的地图隐藏在Twitter Bootstrap 选项卡中，因此在地图初始化时不可见，因此我需要在选择选项卡时调用调整大小，如下所示：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {                 
    google.maps.event.trigger(map, 'resize');
})
于 2017-09-21T23:57:18.967 回答