Question

我正在尝试通过AngularJS应用程序从本地主机连接到Google Maps API，但地图未显示且地图请求未到达Google。 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>

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

1 个答案: