javascript - GoogleMaps API 在 html 文件中工作，但不在 JS 文件中工作

Question

我正在使用在谷歌文档中找到的示例:https://developers.google.com/maps/documentation/javascript/tutorial#asynch

我刚刚复制/粘贴了 hello world 代码，它工作正常:它在指定位置向我显示 map 。但现在我希望能够在 JS 文件中的这个 map 上进行可读性更强的工作，所以我只是添加了 <script src="RunUTrail.js"></script>就在 </body> 之前。该文件包含与 <script> 中找到的完全相同的方法。 :

 var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397,lng: 150.644},
  zoom: 8
  });

所以它应该什么也不做，但我有 ReferenceError: google is not defined 。在 JS 文件中使用 API 时我缺少什么？

Answer 1

您需要将用于 map 显示的js代码放在像initMap()这样的回调函数中，并在谷歌地图脚本源中添加回调函数的名称。

HTML 代码:

  <div id="map" style="width: 500px; height: 400px;"></div>
      <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

JS 代码:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}