Google 地图无法使用从 json 文件加载的标记 - forEach 问题 [关闭]

问题描述 投票:0回答:0

编辑: 我正在尝试配置我的 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
              }
      ]


提前谢谢大家

javascript json google-maps maps google-maps-markers
© www.soinside.com 2019 - 2024. All rights reserved.