谷歌地图不会加载/显示 KML 文件答案

【问题标题】：Google Map won't load/display KML file谷歌地图不会加载/显示 KML 文件
【发布时间】：2016-01-22 19:55:17
【问题描述】：

对我来说又是一个障碍......

问题：有效的 KML 文件（我通过 KML 验证器检查过）不会在 Google 地图中呈现。

演示的临时链接：（链接已删除 - 请参阅答案）。

相关源码：

    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>

我以前做过一次这样的事情，它成功了，所以我又错过了一些基本的东西......

提前感谢您的帮助！

【问题讨论】：

注意：我也尝试了使用 Google KML 文件的地图，但它也不会显示。
您的 KML 文件适用于我的完整 URL：fiddle

标签： javascript google-maps-api-3 kml

【解决方案1】：

不要在 KmlOptions 中为 KmlLayer 使用相对 URL。使用完整的绝对 URL：

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

working fiddle

代码 sn-p：

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>

【讨论】：