javascript - Google Maps Javascript API 仅在控制台打开时加载数据

Question

我试图在我的页面上显示一张 map ，它设置了一个标记。

我的问题是什么

map 实例工作没有任何问题。控制台或谷歌本身没有错误。但不幸的是， map 数据没有加载。正如您在图片上看到的那样，我只得到了 Google Logo 和灰色背景。

然后，当我打开 Google Chrome 的控制台时，它会加载 map 数据并显示具有请求的 map 类型的 map 。

我尝试过的

我在互联网上搜索，发现了一些其他问题，例如灰框，但解决方案对我没有帮助。

现在我的代码是这样的:

<div id="map" style="width:100%;height:400px;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
<script>
function initMap() {
   //Just some example coordinates
   var lat = 47.8;
   var lon = 8.9
   var location = {lat: lat, lng: lon};
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: location,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });
   var marker = new google.maps.Marker({
      position: location,
      map: map
   });
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

有人可以帮助我吗？

Answer 1

它并不完美，但您可以尝试在加载 map 时强制调整大小:

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

或者不用 jQuery:

google.maps.event.addListenerOnce(map, 'idle', () => {
    const event = new Event('resize');
    window.dispatchEvent(event);
});