Question

我正在使用简单的Google地图网络应用，我得到了

ReferenceError: google is not defined

页面加载时（参考代码中的scaledSize：new google.maps.Size（20,20））几天前它正在工作，但我只是为了好玩并且没有把它放在版本控制中，所以我不知道改变了什么。它应该是加载火车图标。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>

      #map {
        height: 100%;
      }

      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      var position = {lat: 45.5100, lng: -122.6000};
      var gmarkers = [];
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
      var lightRailicon = {
          url: iconBase+'rail.png',
          scaledSize: new google.maps.Size(20, 20)
      };

      function initMap() {
      var infowindow = new google.maps.InfoWindow();
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 45.5231, lng: -122.6765},
          zoom: 11
        });

        {% for vehicle in vehicles  %}

        var marker = new google.maps.Marker({
          position: {lat: {{ vehicle.latitude }}, lng: {{ vehicle.longitude }}},
          icon: lightRailicon,
          map: map

        });

        gmarkers.push(marker);
        infowindow =  new google.maps.InfoWindow({});
        marker.addListener('mouseover', function(){
           infowindow.setContent('<div style="width:400px; height:100px">'+"Position: "
            +'Latitude: ' +String({{ vehicle.latitude }})+' ' +'Longitude: '+String({{ vehicle.longitude}})+'<br/>'+
            "Destination: "+'{{ vehicle.signMessageLong }}'+
            '<br/>'+ "Vehicle ID: "+'{{ vehicle.vehicleID }}'+'<br/>'+
            "Is Congested: "+'{{ vehicle.inCongestion }}'+'<br/>'+
            "Delay: "+'{{ vehicle.delay }}'+'<br/>'+
            "Next Stop: "+'{{ vehicle.nextLocID }}'+'</div>');
           infowindow.open(map, this);
        });
        marker.addListener('mouseout', function(){
            infowindow.close();
        });
        {% endfor %}
      }


      function clearMarkers(){
           for(i=0; i<gmarkers.length; i++){
               gmarkers[i].setMap(null);
           }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=Key&callback=initMap"
    async defer></script>
  </body>
</html>

Answer 1

您正在异步加载API，依赖于API 的所有代码必须位于回调函数中（在API加载完成后执行或以其他方式已知在API加载后执行。）

要解决此问题，请将图标的定义移至回调函数中。

function initMap() {
  var lightRailicon = {
    url: iconBase + 'rail.png',
    scaledSize: new google.maps.Size(20, 20)
  };

proof of concept fiddle

代码段

＆＃13;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div id="map"></div>
<script>
  var map;
  var position = {
    lat: 45.5100,
    lng: -122.6000
  };
  var gmarkers = [];
  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';

  function initMap() {
    var lightRailicon = {
      url: iconBase + 'rail.png',
      scaledSize: new google.maps.Size(20, 20)
    };
    var infowindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 45.5231,
        lng: -122.6765
      },
      zoom: 11
    });

    //        {% for vehicle in vehicles  %}
    var vehicle = {
      latitude: 45.5100,
      longitude: -122.6
    }
    var marker = new google.maps.Marker({
      position: {
        lat: vehicle.latitude,
        lng: vehicle.longitude
      },
      icon: lightRailicon,
      map: map

    });

    gmarkers.push(marker);
    infowindow = new google.maps.InfoWindow({});
    marker.addListener('mouseover', function() {
      infowindow.setContent('<div style="width:400px; height:100px">' + "Position: " + 'Latitude: ' + '{{ vehicle.latitude }}' + ' ' + 'Longitude: ' + '{{ vehicle.longitude }}' + '<br/>' +
        "Destination: " + '{{ vehicle.signMessageLong }}' +
        '<br/>' + "Vehicle ID: " + '{{ vehicle.vehicleID }}' + '<br/>' +
        "Is Congested: " + '{{ vehicle.inCongestion }}' + '<br/>' +
        "Delay: " + '{{ vehicle.delay }}' + '<br/>' +
        "Next Stop: " + '{{ vehicle.nextLocID }}' + '</div>');
      infowindow.open(map, this);
    });
    marker.addListener('mouseout', function() {
      infowindow.close();
    });
    //        {% endfor %}
  }


  function clearMarkers() {
    for (i = 0; i < gmarkers.length; i++) {
      gmarkers[i].setMap(null);
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

＆＃13;

未加载Google地图标记图标（ReferenceError：google未定义）

1 个答案: