Question

所以我将谷歌地图添加到我的网站。在第一页加载 - 它不加载。刷新时 - 有时它也不会加载。

代码：

HTML：

    <div id="map">
    </div>   
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKxMTYIeZepn8E6EULm9eFZCixv960J2s&callback=initMap">
    </script>
    <script src="script.js"></script>

jquery的：

function initMap() {};
$(document).ready(function () {
  initMap = function() {
    var myLatLng = {
      lat: 40.1511,
      lng: -2.150609
    };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: myLatLng,
      disableDefaultUI: true,
      styles: [
          ....    
      ]
    });
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: '........',
    });
  }
});

P.S。谷歌功能在单独的“script.js”文件中。

Answer 1

摆脱所有$(document).ready废话（只要在script.js之后出现<div id="map"></div>这一切无关紧要。

真正的问题可能是奇怪的initMap声明（您先声明它，然后在$(document).ready内重新声明它。

所以script.js应如下所示：

 var initMap = function() {
     var myLatLng = {
         lat: 40.1511,
         lng: -2.150609
     };
     var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 16,
         center: myLatLng,
         disableDefaultUI: true,
         styles: [
             ....    
         ]
     });
     var marker = new google.maps.Marker({
         position: myLatLng,
         map: map,
         title: '........'
     });
 }

所有这一切，并在加载时弹出您的控制台，以确保您没有看到任何错误消息。

Google地图首次无法加载，有时会刷新

1 个答案: