GoogleMaps API仅在开放工具时才有效

Question

嘿我想在我的项目中有一张地图。我从Google获取了我的API_KEY用于GoogleMaps ...我在控制台中没有错误但是地图没有显示任何内容，直到我在Google Chrome上打开开发人员工具...

2

之后工作正常但是标记处于工作状态..控制台中仍然没有错误。

我做错了什么？

风格：

#map {
 width: 100%;
 height: 300px;
 background-color: grey;
}

代码：

<div id="map"></div>
 <script>
   function initMap() {
   var myLatLng = {lat: -0.250608, lng: 52.025528};

   var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 4,
   center: myLatLng
   });

   var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Title!'
    });
  }
 </script>
 <script async defer
   src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">
 </script> 

Answer 1

您正在一个不可见/没有尺寸的容器中初始化地图。

打开开发工具会触发浏览器调整大小，导致地图自行调整大小。**

您可以通过以下方式解决此问题：

要么等待初始化地图，直到它的容器可见

或致电google.maps.event.trigger('resize',map)（其中map为     当容器变得可见时，地图的实例。

**证明这就是发生的事情：取消你的开发工具，使它成为一个浮动窗口。然后刷新页面（关闭开发工具）并在看不到地图后再次打开开发工具，它仍然无法显示，因为您的浏览器从未调整大小（因为您的开发工具是浮动的而不是停靠的）