Javascript 使用XMLHttpRequest加载KML谷歌地图,无法加载KML
我必须使用XMLHttpRequest来获取kml文件,因为我无法直接对kml进行更改,需要使用单独的信息窗口绘制多边形,其中包含存储在kml中的详细信息,但不作为描述标记或类似的内容,因此我无法轻松获取它。我成功地做到了这一点,多边形显示和信息窗口工作正常。这是一个相当大的程序,所以我没有在这里显示它,但基本上,当我加载我的getKML函数时,它在开发环境中无法工作或出现问题。但是它在我的本地主机上运行得很好 这是我一直收到的错误消息: 未捕获的NetworkError:未能对“XMLHttpRequest”执行“发送”:未能加载“” 下面是代码,您确实只需要看前几行,因为这是使用xmlhttprequest的地方,也请原谅代码凌乱,仍然是实习生和重构人员:Javascript 使用XMLHttpRequest加载KML谷歌地图,无法加载KML,javascript,ajax,google-maps,google-maps-api-3,xmlhttprequest,Javascript,Ajax,Google Maps,Google Maps Api 3,Xmlhttprequest,我必须使用XMLHttpRequest来获取kml文件,因为我无法直接对kml进行更改,需要使用单独的信息窗口绘制多边形,其中包含存储在kml中的详细信息,但不作为描述标记或类似的内容,因此我无法轻松获取它。我成功地做到了这一点,多边形显示和信息窗口工作正常。这是一个相当大的程序,所以我没有在这里显示它,但基本上,当我加载我的getKML函数时,它在开发环境中无法工作或出现问题。但是它在我的本地主机上运行得很好 这是我一直收到的错误消息: 未捕获的NetworkError:未能对“XMLHttp
/** 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);
}
}
/**使用xmlhttprequest调用以获取kml文件
*然后将其打印为一个或多个多边形
*/
函数getKML(kmlUrl){
var xmlRequest=new XMLHttpRequest();
open(“GET”,kmlUrl,false);
xmlRequest.send();
xmlDoc=xmlRequest.responseXML;
var x=xmlDoc.getElementsByTagName(“Placemark”);
//遍历kml文件中的每个Placemark标记
var停机时间、恢复时间、事件编号、填充颜色、边界颜色;
var objArray=[];
对于(变量i=0;i
更新1:我后来在控制台中发现了这个错误:
无法加载XMLHttpRequest。请求的资源上不存在“Access Control Allow Origin”标头。因此不允许访问源“”。这是一个跨域请求问题,我将在获取kml时开始使用相对地址来指向
它解决了我的问题。您需要提供一个代码示例,显示问题发生的位置。可能是跨域请求?我的情况是否与此人类似?:更新1:我后来在控制台中发现此错误:XMLHttpRequest无法加载。请求的资源上不存在“Access Control Allow Origin”标头。因此,不允许访问源“”。