谷歌地圖將不會加載/顯示KML文件

Question

另一個難倒的我...

問題：有效的KML文件（我通過KML驗證檢查的話）在谷歌地圖將不會呈現。

演示臨時鏈接:(鏈接已刪除 - 請參閱答案）。

相關的源代碼：

var src = "geodata/path1.kml?time="+new Date().getTime(); 
    //var src = "geodata/westcampus.kml"; 

    function initialize() { 
     var mapCanvas = document.getElementById("poemMap"); 
     var mapOptions = { 
      center: new google.maps.LatLng(51.258476, -2.184906), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     map = new google.maps.Map(mapCanvas, mapOptions); 
     loadKmlLayer(src, map); 
    } 

    function loadKmlLayer(src, map) { 
     var kmlUrl = src; 
     var kmlOptions = { 
      suppressInfoWindows: false, 
      preserveViewport: false, 
      map: map 
     }; 
     var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); 
     } 

    google.maps.event.addDomListener(window, 'load', initialize); 

KML文件：

<?xml version="1.0" encoding="UTF-8" ?> 
<kml xmlns="http://www.opengis.net/kml/2.2" 
    xmlns:gx="http://www.google.com/kml/ext/2.2" 
    xmlns:kml="http://www.opengis.net/kml/2.2" 
    xmlns:atom="http://www.w3.org/2005/Atom" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation= 
     "http://www.opengis.net/kml/2.2 
     http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd 
     http://www.google.com/kml/ext/2.2 
     https://developers.google.com/kml/schema/kml22gx.xsd 
     http://www.w3.org/2005/Atom 
     http://schemas.opengis.net/kml/2.2.0/atom-author-link.xsd"> 
<Document> 
    <name>Path One</name> 
    <Style id="style1"> 
     <IconStyle> 
      <Icon> 
       <href>http://maps.gstatic.com/mapfiles/ms2/micons/red-dot.png</href> 
      </Icon> 
     </IconStyle> 
     <LineStyle> 
      <color>ffff0000</color> 
      <width>4</width> 
     </LineStyle> 
    </Style> 
    <Placemark> 
     <name>The Path</name> 
     <description>The Path</description> 
     <LineString> 
      <altitudeMode>absolute</altitudeMode> 
      <coordinates> 
-1.6475739999999632,54.155578,1 
-1.6475739999999632,54.155578,1 
-1.6475739999999632,54.155578,1 
-2.146682,51.263756,1 
-4.224413,51.129983,1 
-0.128226,51.508419,1 
-1.710998,52.193344,1 
-0.119584,51.502559,1 
-0.128542,51.509063,1 
1.833721,42.871478,1 
-2.187545,51.182921,1 
-2.242541,51.338025,1 
-0.014674,51.402531,1 
-3.533899,50.718412,1 
-0.797897,54.136836,1 
-0.797897,54.136836,1 
      </coordinates> 
     </LineString> 
    </Placemark> 
    <Placemark> 
     <name>The Muntjac</name> 
     <description>1. The Muntjac</description> 
     <styleUrl>#style1</styleUrl> 

     <Point> 
      <coordinates>-1.6475739999999632,54.155578</coordinates> 
     </Point> 
    </Placemark> 
    ... 
</Document> 
</kml> 

我曾經做過這樣的，它的工作，所以我又失去了一些東西根本...

感謝您的幫助！

Answer 1

不要在KmlOptions中爲KmlLayer使用相對URL。使用完整的絕對URL：

var src = "http://www.jntae.com/demos/bryden/geodata/path1.kml?time=" + new Date().getTime(); 

working fiddle

代碼片段：

var map; 
 
var src = "http://www.jntae.com/demos/bryden/geodata/path1.kml?time=" + new Date().getTime(); 
 

 
function initialize() { 
 
    var mapCanvas = document.getElementById("poemMap"); 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(51.258476, -2.184906), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.HYBRID 
 
    } 
 
    map = new google.maps.Map(mapCanvas, mapOptions); 
 
    loadKmlLayer(src, map); 
 
} 
 

 
function loadKmlLayer(src, map) { 
 
    var kmlUrl = src; 
 
    var kmlOptions = { 
 
    suppressInfoWindows: false, 
 
    preserveViewport: false, 
 
    map: map 
 
    }; 
 
    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); 
 
    google.maps.event.addListener(kmlLayer, 'status_changed', function() { 
 
    document.getElementById('status').innerHTML = kmlLayer.getStatus(); 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#poemMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="status"></div> 
 
<div id="poemMap"></div>