我正在开发一个简单的 Google map 网络应用，我得到了
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>
最佳答案
您正在异步加载 API，所有依赖于 API 的代码必须位于回调函数中(该函数在 API 完成加载后执行，或者以其他方式已知在 API 加载后执行)。
要解决该问题，请将图标的定义移至回调函数中。
function initMap() {
var lightRailicon = {
url: iconBase + 'rail.png',
scaledSize: new google.maps.Size(20, 20)
};
代码片段:
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<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>关于javascript - Google map 标记图标未加载(ReferenceError : google is not defined))，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42755950/