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

  显示原文与译文双语对照的内容

我必须使用 XMLHttpRequest,因为我不能直接改变它,并且需要用它们独立的infowindows绘制多边形。 我做到了,多边形的显示和infowindows的工作。 这是一个相当大的程序,因这里我没有在这里显示,但基本上我的getKML功能在开发环境或者现在。 虽然它在我的本地主机上运行良好。

这是我一直获取的错误消息: 未捕获的NetworkError: 在'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'标头。 因此,源'https://someurl'不允许访问。

时间: 原作者:

它是一个跨域请求问题,我将开始使用 relative 地址来点取我的kml 。

它解决了我的问题。

原作者:
...