Question

请帮我调试Chrome无法识别谷歌的原因。我收到这个错误：

未捕获的ReferenceError：未定义谷歌

我已将API脚本移至顶部，失败。我调整了自己的代码以匹配Google的文档，但失败了。是Chrome导致了我的问题吗？

<!DOCTYPE html>
<html>
<head>
    <title>weather map</title>
    <style type="text/css">
    html, body {
        margin: 0;
    }
    #map-canvas {
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="container">
        <h1>Map Test</h1>
        <div id="map-canvas">
        </div>
    </div>

    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            google.maps.event.addDomListener(window, 'load', initMap);
        });

        var map; 
        function initMap() {        
            map = new google.maps.Map(document.getElementById("map-    canvas"), {
                center: {lat: 29.423017, lng: -98.48527},
                zoom: 8,
            });
        }
    </script>
    <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_WAS_HERE_&callback=initMap">
    </script>
</body>
</html>

Answer 1

您正在异步加载Google Maps Javascript API。在运行initMap（回调）函数之前，不能使用任何方法。

working fiddle

代码段

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map-canvas"), {
    center: {
      lat: 29.423017,
      lng: -98.48527
    },
    zoom: 8
  });
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
#map-canvas {
  width: 100%;
  height: 100%;
}

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<div id="container" style="height:100%; width:100%;">
  <h1>Map Test</h1>
  <div id="map-canvas"></div>
</div>

Answer 2

你不应该将你的谷歌地图事件放在$(document).ready();中，因为window.load已经注册了一个事件监听器，这应该足够了。

您的Google地图脚本标记也应该位于您的JavaScript代码之上，并且事件监听器也应该移动到该功能下方。

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

<script type="text/javascript">
    var map; 
    function initMap() {        
        map = new google.maps.Map(document.getElementById("map-    canvas"), {
            center: {lat: 29.423017, lng: -98.48527},
            zoom: 8,
            });
        }

    google.maps.event.addDomListener(window, 'load', initMap);
</script>

下次你应该更全面地阅读文档。

未定义的referenceError谷歌未定义

2 个答案: