为什么我的有效 kml 在加载到谷歌地图时显示为“INVALID_DOCUMENT”

Question

我有一个图层，我正在尝试推送到谷歌地图。

该页面在这里：http : //live2.offrs.com/buyerherodev/ziptractselect.html?ZIP=20001

kml 的数据源在这里：http : //live2.offrs.com/buyerherodev/data/polytract.cfm? ZIP=20001&dummy= 1442778330778

当我在 Glados 中输入 kml 的 url 时，它说没有错误。

但是，当我在页面中加载它时，它显示“INVALID_DOCUMENT”。

我确实动态构建了 kml url，但是一旦构建了 url，我将它发送到 console.log 以确认它。没有问题。

谁能告诉我在哪里看？谢谢

这是地图的javascript：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var boundaryurl = window.location.protocol + "//" + window.location.host + "/buyerherodev/data/polygon.cfm?TYPE=ZIP&VALUE=" + getUrlVars()["ZIP"] + "&LC=641400FF&LW=3&FC=14F11C2E&F=1&FO=1";
var tracturl = window.location.protocol + "//" + window.location.host + "/buyerherodev/data/polytract.cfm?ZIP=" + getUrlVars()["ZIP"]+"&dummy="+(new Date()).getTime();

console.log(boundaryurl);
console.log(tracturl);

var kmlLayer1 = new google.maps.KmlLayer(boundaryurl, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map,
    zindex: 0,
    clickable : false
});


var kmlLayer2 = new google.maps.KmlLayer(tracturl, {
    suppressInfoWindows: true,
    preserveViewport: false
});

console.log(kmlLayer2);


google.maps.event.addListener(kmlLayer2,'status_changed', function() {
  if (!(kmlLayer2.getStatus() == 'OK')) {
    alert("There are no tracts.  Try again.");
    // window.location="http://domain.com/findterritory_none.cfm";
  }
});

kmllayer1 工作没有问题。kmllayer2 是我今天要讲的层。问题出在 kmllayer2 上。我放置了“status_changed”监听器来检查错误的kml，这里报告了错误。

我错过了什么吗？

谢谢

Answer 1

KML 文件的 Content-Type 必须是application/vnd.google-earth.kml+xml，但目前是application/xml

您必须配置服务器以返回正确的 Content-Type-header ：

使用具有正确标题的相同文件的示例（使用 phpfiddle，我不确定它会工作多长时间）：

function init() {
  var mapOptions = {
    zoom: 0,
    center: {
      lat: 0,
      lng: 0
    }
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  new google.maps.KmlLayer('http://main.xfiddle.com/code_63194890.php', {
    map: map
  });


}

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init"></script>