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

Google Map won't load/display KML file

本文关键字：显示 KML 文件 加载 谷歌地图      更新时间：2023-09-26

对我来说又是一个绊脚石...

问题：有效的 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>

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

提前感谢您的帮助！

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

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

工作小提琴

代码片段：

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>

相关文章：