使用JSON数据集通过API在Google Maps添加标记遇阻，求排查指导

Hey there! It sounds like you had this working smoothly with another dataset before, so let's break down why things might be stuck with the OpenChargeMap API. Here are the most likely issues to check off:

1. Fix the API URL Syntax #

Your URL includes &—that's an HTML entity for &, which won't parse correctly in a JavaScript XMLHttpRequest. Replace those with plain & to ensure your query parameters are read properly. Also, maxresults=* might not be a valid value for this API; try a specific number like 100 instead, since many public APIs don't accept wildcards for result limits:

var url = 'https://api.openchargemap.io/v2/poi/?output=json&countrycode=NO&maxresults=100';

2. Complete Your XMLHttpRequest Handling #

Your code cuts off mid-implementation, so make sure you've added the critical onload handler to process the API response. Here's a full, working example to reference:

function initMap() {
  // First, initialize your map with a valid center (Norway, in this case)
  var map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 60.4720, lng: 8.4689 },
    zoom: 6
  });

  var xhr = new XMLHttpRequest();
  var url = 'https://api.openchargemap.io/v2/poi/?output=json&countrycode=NO&maxresults=100';
  xhr.open('GET', url, true);

  // Handle the API response
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 400) {
      try {
        var chargingStations = JSON.parse(xhr.responseText);
        
        // Log the first entry to double-check the data structure
        console.log('Sample station data:', chargingStations[0]);

        // Loop through each station to create a marker
        chargingStations.forEach(function(station) {
          // OpenChargeMap stores coordinates inside the AddressInfo object
          var stationCoords = new google.maps.LatLng(
            station.AddressInfo.Latitude,
            station.AddressInfo.Longitude
          );
          
          new google.maps.Marker({
            position: stationCoords,
            map: map,
            title: station.AddressInfo.Title // Use the station name as marker tooltip
          });
        });
      } catch (err) {
        console.error('Failed to parse JSON response:', err);
      }
    } else {
      console.error('API request failed with status:', xhr.status);
    }
  };

  // Add network error handling
  xhr.onerror = function() {
    console.error('Network error occurred while fetching charging station data');
  };

  xhr.send();
}

3. Verify the JSON Data Structure #

Unlike your previous dataset, OpenChargeMap nests location data inside the AddressInfo object. If your old code tried to access latitude/longitude directly from the root of each item, that's exactly why it's failing now. Use console.log(chargingStations[0]) in your browser's dev tools (F12) to inspect the exact structure of the response and confirm you're targeting the right fields.

4. Check for CORS or API Access Issues #

Pop open your browser's developer console and look for:

• CORS errors (which would block the API request entirely)
• 400/401 status codes (indicating invalid parameters or a missing API key—some APIs require authentication for full access)

If you see a 401 error, double-check OpenChargeMap's documentation to see if you need to include an API key in your request headers or query parameters.

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