Question

加载页面后，我无法加载谷歌地图。每次我必须刷新以使其适应，我不明白其原因。有人可以帮忙吗？

这是我的html（有点简化）

<div id="lblContact" class="menu-content">
<div id="googleMap" style="height:400px;width:100%;"></div>
</div>

这是剧本：

   <script>
     function initMap() {
        var uluru = {lat: 55.682121, lng: 12.522697};
        var map = new google.maps.Map(document.getElementById('googleMap'), {
              zoom: 4,
              center: uluru
            });
            var marker = new google.maps.Marker({
              position: uluru,
              map: map
            });
          }
 </script>

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_absRIQusU2qV5pLwxf3zyIlspwe9Wwc&callback=initMap">
 </script>

P.S

我尝试更改脚本的顺序，但没有帮助。

Answer 1

尝试使用此DOMContentLoaded函数包装代码，它只会在DOM加载后运行并且应该解决您的问题，它是jQuery＆＃39; s {{1}如果你熟悉那个：

$(document).ready(function(){})

Answer 2

 var uluru = {lat: 55.682121, lng: 12.522697};
        var map = new google.maps.Map(document.getElementById('googleMap'), {
              zoom: 4,
              center: uluru
            });
            var marker = new google.maps.Marker({
              position: uluru,
              map: map
            });

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_absRIQusU2qV5pLwxf3zyIlspwe9Wwc&callback=initMap"></script>
<div id="lblContact" class="menu-content">
<div id="googleMap" style="height:400px;width:100%;"></div>
</div>

Google地图仅在刷新后显示

2 个答案: