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

Question

我必须使用 XMLHttpRequest 来获取 kml 文件，因为我无法直接对 KML 进行更改，并且需要使用自己单独的信息窗口绘制多边形，其详细信息存储在 KML 中，但不作为描述标记或类似的东西，所以我不能轻易捕获它。我设法做到了这一点，并且多边形显示和信息窗口工作。它是一个相当大的程序，所以我没有在这里显示它，但基本上当我加载我的 getKML 函数时，它不会在开发环境中工作或出现问题。而它在我的本地主机上运行良好。

这是我不断收到的错误消息: 未捕获的网络错误:无法在“XMLHttpRequest”上执行“发送”:无法加载“https://someURL/polygons_live.kml” '.

这是代码，您实际上只需要查看前几行，因为这就是使用 xmlhttprequest 的地方，也请原谅我的凌乱代码，仍然是实习生和重构:

  /** 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);
}
}

更新 1:我实际上发现此错误后来出现在我的控制台中: XMLHttpRequest 无法加载https://someurl/polygons_live.kml 。请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'https://someurl ' 因此不允许访问。

Answer 1

这是一个跨域请求问题，我将在抓取我的kml时开始使用相对地址来指向。

它解决了我的问题。