Google Maps API 从 html 文件加载，但不在本地主机上

Question

我正在尝试通过 AngularJS 应用程序从本地主机连接到 Google Maps API，但地图没有出现，地图请求也没有到达谷歌。 html正在找到javascript文件，并且正在控制台中输出test1，但没有调用initMap并且没有输出test2。我预计它会失败，因为没有与 Google 建立 https 连接。

当我在浏览器中打开 html 文件时，地图加载正常，但是当我在本地主机上运行它时，什么也没有出现。

这是我的html代码：

<script src="client/services/maps.client.services.map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{API_KEY}}&callback=initMap"></script>

和javascript（map.js）：

console.log('test1');
function initMap() {
  console.log('test2');

  //Markers
  var markers = [
      ['Cardiff', 51.4539, -3.1694, 'city/cardiff'],
      ['Swansea', 51.6148, -3.92927895, 'city/swansea']
  ];

  // Initialise map
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 51.4539, lng: -3.1694}
  });

  var bounds = new google.maps.LatLngBounds();
  for( i = 0; i < markers.length; i++ ) {
    // Plot pin for each place
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: markers[i][0]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        window.location.href = markers[i][3];
      }
    })(marker, i));
  }

  // Zoom so all pins are in view
  map.fitBounds(bounds);
}

有人明白为什么没有调用initMap 函数吗？

Answer 1

改变脚本标签的顺序

<script src="https://maps.googleapis.com/maps/api/js?key={{API_KEY}}&callback=initMap"></script>
<script src="client/services/maps.client.services.map.js"></script>