Google Map报错：Cannot read property 'responseXML' 技术求助

Hey there, let's work through that Cannot read property 'responseXML' error you're facing when trying to pull transit vehicle positions into Google Maps. Here are the most likely fixes based on your code and common pitfalls:

1. First: Verify Your API Request & Response Format #

Your code cuts off the API URL at ?format=x... — I suspect this is a typo, and you meant ?format=xml to get XML output. Let's confirm:

• Paste the full, corrected API URL directly into Chrome's address bar. Does it return valid XML? If it returns JSON or plain text, responseXML will be null (since the browser only parses XML when the server sends a proper XML Content-Type header like application/xml or text/xml).
• Check the response headers in Chrome DevTools (F12 → Network tab): Find your GET request, look for the Content-Type header. If it's not XML-related, you'll need to either:
  • Adjust the API parameters to force XML output, or
  • Manually parse the responseText into XML using DOMParser:

    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xhttp.responseText, "text/xml");
    // Check if parsing succeeded (invalid XML will return a doc with <parsererror>)
    if (!xmlDoc.querySelector("parsererror")) {
      initMap({ responseXML: xmlDoc });
    } else {
      console.error("Invalid XML response:", xhttp.responseText);
    }
    

2. Add Safety Checks Before Accessing responseXML #

Even if the request succeeds, responseXML can still be null if the browser can't parse the response. Update your callback to handle this, and don't forget the critical send() call (your original code missed this!):

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4) {
    if (this.status == 200) {
      if (this.responseXML) {
        initMap(this);
      } else {
        console.warn("responseXML is null — trying manual parse");
        // Run the manual parse code from step 1 here
      }
    } else {
      console.error("Request failed with status:", this.status);
    }
  }
};
// Make sure your URL is complete!
xhttp.open("GET", "https://applications002.brest-metropole.fr/WIPOD01/Transport/REST/getGeolocatedVehiclesPosition?format=xml");
xhttp.send();

3. Fix Cross-Origin (CORS) Issues #

If you're running your local page via file:// (double-clicking the HTML file), Chrome blocks cross-domain requests by default. To fix this:

• Serve your project from a local web server: Use Python's python -m http.server (Python 3) or Node.js's http-server package to run your files at http://localhost:8000 (or similar).
• If the API server doesn't allow CORS requests from your local origin, you can use a local proxy (configure your dev server to forward requests to the API) or use Chrome's temporary cross-domain debug mode (only for development: right-click Chrome shortcut → Properties → add --disable-web-security --user-data-dir="C:/ChromeDevSession" to the target field, then launch this Chrome instance).

4. Secure Your initMap Function #

Make sure initMap checks for valid XML before processing:

function initMap(xhttpObj) {
  var xmlData = xhttpObj.responseXML;
  if (!xmlData) {
    console.error("No valid XML data received");
    return;
  }
  // Proceed to parse XML and add Google Maps markers...
}

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