我正在尝试配置我的谷歌地图以使用从我的 JSON 文件加载的标记 - 我的任务要求。我的标记没有显示，（包括地理定位）并且在控制台中，我有两个错误：
*cs50c-week09-16-avir…hanwilde.repl.co/:1 Uncaught (in promise)
_.Zd {message: 'initMap is not a function', stack: 'Error\n at _.Zd.captureStackTrace (https://maps.…DUaqE9Dpy_HiaK58LnMAGxJQ&callback=initMap:217:232', name: 'InvalidValueError'}
message
:
"initMap is not a function"*
和
SyntaxError: Unexpected non-whitespace character after JSON at position 11
(anonymous) @ script.js:56
Promise.catch (async)
(anonymous) @ script.js:56
我不明白为什么它声明 initMap 不是函数，或者 JSON 之后的非空白字符（script.js:56 是它尝试获取和捕获错误的地方）
如果有人能帮我弄清楚为什么我的标记没有加载，我将不胜感激。
这是我的 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Week 9</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="mymap"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&callback=initMap"></script>
<script src="script.js"></script>
</body>
</html>
这是我的 script.js：
var locations = [];
function initMap() {
// Get user's geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var userLatLng = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// Create the map
var map = new google.maps.Map(document.getElementById('mymap'), {
center: userLatLng,
zoom: 8
});
// Add a marker for user's location
var userMarker = new google.maps.Marker({
position: userLatLng,
map: map,
title: 'Your Location',
icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
// Add markers for the locations from the JSON file
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: {lat: location.lat, lng: location.lng},
map: map,
title: location.title
});
// Add an info window for the marker
var infowindow = new google.maps.InfoWindow({
content: location.title
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
});
} else {
console.log('Geolocation is not supported by this browser.');
}
}
// Load the JSON file
fetch('data.json')
.then(response => response.json())
.then(data => {
locations = data.locations;
initMap();
})
.catch(error => console.error(error));
这是我的 data.json：
"locations": [
{
"title": "Hoosier Pass",
"lat": 39.36215,
"lng": -106.06265
},
{
"title": "Buffalo Lookout",
"lat": 36.34450,
"lng": -93.51904
},
{
"title": "Clingmans Dome",
"lat": 35.56285,
"lng": -83.49850
},
{
"title": "Zion National Park",
"lat": 37.21289904975849,
"lng": -112.95803242895616
},
{
"title": "Pikes Peak",
"lat": 38.841774321252984,
"lng": -105.04235541469538
},
{
"title": "Tail of the Dragon",
"lat": 35.50688877823149,
"lng": -83.97611341507623
},
{
"title": "Pig Trail Scenic Byway",
"lat": 35.69756089118235,
"lng": -93.79531706504065
},
{
"title": "Great Smokey Mountains",
"lat": 35.64205572061996,
"lng": -83.51342741825377
},
{
"title": "Monte Cristo Scenic Overlook",
"lat": 41.41594517129548,
"lng": -111.52631662936764
}
]
提前谢谢大家
我在故障排除时遇到了上面提到的两个错误，但我一直无法弄清楚为什么会抛出这些错误