编辑: 我正在尝试配置我的 Google 地图以使用从我的 JSON 文件加载的标记 - 我的任务要求。我的标记不显示(不包括地理定位标记)。我通过 jsonlint 验证了我的 json,一切看起来都很好。在控制台中,我有一个错误:
script.js:27 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
at script.js:27:17
如果有人能帮我弄清楚为什么会这样,我将不胜感激。
这是我的 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" defer></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.');
}
}
window.initMap = initMap;
// Load the JSON file
fetch('data.json')
.then(response => response.json())
.then(data => {
locations = data.locations;
this.initMap();
})
.catch(error => console.error(error));
这是我的 data.json:
[
{
"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
}
]
提前谢谢大家