使用XMLHttpRequest加载KML谷歌地图，无法加载KML

Question

I have to use XMLHttpRequest to grab a kml file, because I cannot directly make changes to the KML and needed to draw out polygons with their own separate infowindows with details on them that is stored in the KML but not as a description tag or anything like that so I couldn't just grab it easily. I managed to do this, and the polygons display and the infowindows work. Its a sizable program so I didn't display it here, but basically when I load the getKML function of mine, it would not work in the development environment or present issues. Whereas it would work well on my localhost.

This is the error message I keep getting: Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load ' https://someURL/polygons_live.kml '.

Heres the code, you really only need the first couple lines to look at because thats where xmlhttprequest is used, also excuse me for the messy code, still an intern and refactoring:

  /** Calls using xmlhttprequest to grab the kml file
  * and later prints it out as one or more polygons
  */
function getKML(kmlUrl) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.open("GET", kmlUrl, false);
xmlRequest.send();
xmlDoc = xmlRequest.responseXML;
var x = xmlDoc.getElementsByTagName("Placemark");
// travels through each Placemark tag in the kml files
var outage_time, restoration_time, event_number_value, fillColour, borderColour;
var objArray = [];

for (var i = 0; i < x.length; i++) {
    // uses momentjs api to create human readable dates
    var date_format = "MMM DD, hh:mm a";
    // gets the event number
    event_number_value = x[i].getElementsByTagName("SimpleData")[2].childNodes[0].nodeValue;
    // gets outage start time
    var outage_time_value = x[i].getElementsByTagName("SimpleData")[3].childNodes[0].nodeValue;
    var outage_time_moment = moment(outage_time_value);
    outage_time = outage_time_moment.format(date_format);
    // gets estimated restoration time
    var restoration_time_value = x[i].getElementsByTagName("SimpleData")[5].childNodes[0].nodeValue;
    // checks to see if we have a restoration time or not
    if (restoration_time_value === "2001-01-01T00:00:00") {
        restoration_time = "Not yet determined";
    } else {
        var restoration_time_moment = moment(restoration_time_value);
        restoration_time = restoration_time_moment.format(date_format);
    }
    // gets the coordinates of the polygon
    var coords = x[i].getElementsByTagName("coordinates")[0].childNodes[0].nodeValue;
    var coordinate = coords.split(",0 ");
    var coordJoined = coordinate.join();
    var coordAgain = coordJoined.split(",");
    // gets the colour of the polygon
    var colour = x[i].getElementsByTagName("styleUrl")[0].childNodes[0].nodeValue;
    // determines the colour out of yellow, orange and red
    if (colour === "#Style1") {
        fillColour = '#f1c40f';
        borderColour = '#f1c40f';
    } else if (colour === "#Style2") {
        fillColour = '#e67e22';
        borderColour = '#e67e22';
    } else {
        fillColour = '#c0392b';
        borderColour = '#c0392b';
    }

    // creates objects and adds it to array to be later used as data
    var obj = {
        eventID : event_number_value,
        offTime : outage_time,
        restoreTime : restoration_time,
        fill : fillColour,
        borderCol : borderColour
    };
    objArray.push(obj);

    // create a LatLng array out of the coordinate string
    var polygonCoords = new Array();
    var j = 0;
    var z = j + 1;
    //var firstCoord = new google.maps.LatLng();
    while (z < coordAgain.length) {
        // adds the first and last latLng to the array of polygonCoords
        if ((j % 2) == 0) {
            var co1 = parseFloat(coordAgain[z]);
            var co2 = parseFloat(coordAgain[j]);
            var newLatLng = new google.maps.LatLng(co1, co2);
            polygonCoords.push(newLatLng);
        } else {
            var co1 = parseFloat(coordAgain[j]);
            var co2 = parseFloat(coordAgain[z]);
            var newLatLng = new google.maps.LatLng(co1, co2);
            polygonCoords.push(newLatLng);
        }
        j++;
        z++;
    }
    //removes last coordinate as its useless as its not a number
    polygonCoords.pop();

    /** Adds the polygon to a polygon array
     * and maps it onto the map
     */
    var newPoly = new google.maps.Polygon({
        paths : polygonCoords,
        strokeColor : objArray[i].borderCol,
        strokeOpacity : 0.35,
        strokeWeight : 2,
        fillColor : objArray[i].fill,
        fillOpacity : 0.35
    })
    newPoly.setMap(map);
    newPoly.set("eventNum", objArray[i].eventID);
    newPoly.set("offTime", objArray[i].offTime);
    newPoly.set("resTime", objArray[i].restoreTime);

    google.maps.event.addListener(newPoly, 'click',
            attachInfoWindow(newPoly));
    polyArray.push(newPoly);
}
}

Update 1: I actually found this error later on appearing in my console: XMLHttpRequest cannot load https://someurl/polygons_live.kml . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://someurl ' is therefore not allowed access.

Answer 1

Its a cross-domain request issue, I'm going to start using relative addresses to point to when grabbing my kml.

It resolved my issue.