我正在尝试将 geoJSON 文件中的标记加载到我的 map 上， map 加载正常，但不断出现错误...
Uncaught ReferenceError: google is not defined
在这一行...
google.maps.event.addDomListener(window, 'load', initialize);
我已阅读 a few关于此的其他问题，其中大部分涉及如何在 map 代码之前包含谷歌地图脚本。我尝试过将其包含在我的脑海中和 map 容器的正上方，但没有成功。 map 本身确实会加载，只是 JSON 文件中的标记不会加载。
HTML/JS 代码
<!DOCTYPE html>
<html>
<head>
<title>Game Industry Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel=StyleSheet href="css/style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-defualt navbar-fixed-top">
<a class="navbar-brand" href="#">Game Industry Map</a>
<div class="input-group">
<input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value="">
<div class="input-group-btn">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
<div class='content-container'>
<div id="map"></div>
<div id="company-info">
<!--To do...-->
</div>
</div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 34.029602, lng: -118.452416},
zoom: 13
});
map.data.loadGeoJson('data.json');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
type="text/javascript"></script>
</body>
<footer>Created by <a href="#">My Name</a>.</footer>
</html>
geoJSON 文件
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [34.019602, -118.452416]},
"properties": {
"company-logo": "images/activision.png",
"company-name": "Activision Publishing Inc",
}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [34.028230, -118.471270]},
"properties": {
"company-logo": "images/naughtydog.png",
"company-name": "Naughty Dog Inc",
}
}
]
}
最佳答案
尝试在调用库的脚本之前包含 google 库:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
type="text/javascript"></script>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 34.029602, lng: -118.452416},
zoom: 13
});
map.data.loadGeoJson('data.json');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
编辑
您在此处定义回调:/maps/api/js?key=API_KEY_HERE&callback=initMap
一旦谷歌地图加载了其所有组件，这将调用您的 initMap() 方法。
但是您在此函数之外调用 google.maps.event.addDomListener(window, 'load',initialize);，因此，当 google 尚未加载时.
您应该尝试将 addDomListener 调用包含在 initMap() 调用中!
关于javascript - Uncaught ReferenceError : google is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36267158/