Question

我正在初始化一个显示无div的谷歌地图而且出了点问题，我只看到一个灰色方块

<div style="display:none;"  id="divMap">
     <div id="map" style="width:300px; height:300px;"></div>
</div>
<button onclick="showMap();">test</button>

但当我删除style =＆＃34; display：none;＆＃34;它的工作原理

我创建了一个小提琴手https://jsfiddle.net/ka8nywrg/2/ 你可以从这里测试一下。按下按钮

时会显示地图

我该怎么做才能防止这种情况发生？

代码段（来自发布的小提琴）：

＆＃13;

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

function showMap(){

document.getElementById("divMap").style.display = 'block'

}

＆＃13;

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div style="display:none;"  id="divMap">
<div id="map" style="width:300px; height:300px;"></div>
</div>
<button onclick="showMap();">show map</button>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

＆＃13;

Answer 1

当与地图相对应的更改时，最好在地图上调用Maps API V3的resize方法。地图需要再次渲染。

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

这应该对你有所帮助！每当你切换 display：none 属性时，也只需调用上面的函数！

Answer 2

你需要做两件事：

致电google.maps.event.trigger(map, 'resize');告诉地图div已改变大小。
确定div的大小后重新设置地图的中心位置：

map.setCenter(mapCenter);

proof of concept fiddle

代码段

＆＃13;

var map;
var mapCenter = {
  lat: -34.397,
  lng: 150.644
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: mapCenter,
    zoom: 8
  });
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter()
  })
}

function showMap() {

  document.getElementById("divMap").style.display = 'block'
  google.maps.event.trigger(map, 'resize');
  map.setCenter(mapCenter);

}

＆＃13;

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div style="display:none;" id="divMap">
  <div id="map" style="width:300px; height:300px;"></div>
</div>
<button onclick="showMap();">show map</button>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

＆＃13;

谷歌地图现在显示当你在display none div中初始化时

2 个答案: