基于JSON文件为Google Maps添加多标记的技术问题

Hey there! Let's break down what might be going wrong here and walk through how to fix it step by step.

From what you described, the core issue seems to be either failing to load your restaurant JSON data correctly, or not tying that data to your Google Maps markers properly. Let's go through key checkpoints:

1. First: Confirm your JSON is loading properly #

This is the most common culprit. Let's verify these details:

• File path: Make sure your JSON file is in the correct directory relative to your HTML/JS file. A wrong path will throw a 404 error in the browser console.
• CORS issues: If you're testing locally using the file:// protocol, browsers block cross-origin requests. Use a local server instead (like running npx http-server in your project folder).
• Async handling: If you're using fetch or XMLHttpRequest to get the JSON, you must process the marker logic inside the callback/then block—you can't run it synchronously, because the data won't be loaded yet.

Here's a proper async loading example:

// Replace 'restaurants.json' with your actual file path
fetch('restaurants.json')
  .then(response => {
    if (!response.ok) throw new Error('Failed to load JSON');
    return response.json();
  })
  .then(allRestaurants => {
    // Grab the first 20 restaurants
    const top20Restaurants = allRestaurants.slice(0, 20);
    // Now add markers since we have the data
    addMarkers(top20Restaurants);
  })
  .catch(err => console.error('JSON loading error:', err));

2. Ensure your map is fully initialized #

Your initialize function needs to trigger at the right time:

• If you're loading Google Maps asynchronously, make sure your script URL includes the callback=initialize parameter:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"></script>

• Or wait for the DOM to load before initializing:

document.addEventListener('DOMContentLoaded', initialize);

3. Verify your marker-adding logic #

Once you have the restaurant data, make sure you're creating markers correctly:

// Global map variable (matches your existing code)
var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(55.9753905, -1.6236163),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function addMarkers(restaurants) {
  restaurants.forEach(restaurant => {
    // Replace 'lat' and 'lng' with the actual field names from your JSON
    const markerPosition = new google.maps.LatLng(restaurant.lat, restaurant.lng);
    new google.maps.Marker({
      position: markerPosition,
      map: map,
      title: restaurant.name // Show restaurant name on hover
    });
  });
}

4. Debug with browser tools #

• Open your browser's dev console (F12) and check for errors: JSON parse failures, missing API keys, undefined variables, etc.
• After loading the JSON, run console.log(allRestaurants) to confirm you're getting the data you expect.
• Make sure your map container has explicit width/height in CSS:

#map {
  height: 500px;
  width: 100%;
}

Work through these checks one by one, and you should be able to get those markers showing up on your map!

内容的提问来源于stack exchange，提问作者Melanie