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

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部分加载在左上角,调整大小事件不起作用,Ian Devlin发布):

正如一位用户在这里所说,我需要调整地图大小.但只是那条线不起作用.我在initialize函数的末尾添加了这段代码:

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值

希望这可以帮助!