使用可公开访问的 URL 时，KML 文件在 javascript Google 地图中不起作用答案

【问题标题】：KML file not working in javascript Googlemaps when using publicly accessable URL使用可公开访问的 URL 时，KML 文件在 javascript Google 地图中不起作用
【发布时间】：2014-02-24 21:21:30
【问题描述】：

我正在尝试使用 javascript API 实现一个 kml 文件，但它不起作用。当我使用 Google 地球时，kml 文件正在工作。我似乎不知道问题出在哪里。所有其他标记、多边形等都在工作。我尝试在我的域上运行代码，它在那里没有任何问题。但是当我尝试在本地运行 html 文件并且 kml 文件在我的 url 中时，就会出现问题。我希望它在本地运行。请帮忙。

工作网址是click here to see the working code

我的代码如下

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
<script src="http://maps.googleapis.com/maps/api/js?key={API_Key}&sensor=false">
</script>

<script>

function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(49.4076800,8.6907900),
  zoom:11,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);

var ctaLayer = new google.maps.KmlLayer({
    url: 'http://phanishashank.com/test.kml'
  });
  ctaLayer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" ></div>

</body>
</html>

我的kml文件中的数据如下。

<kml xmlns="http://earth.google.com/kml/2.1">
  <Document>
    <name>Test Path</name>
    <description>map in Heidelberg</description>

    <Style id="blueLine">
      <LineStyle>
        <color>ffff0000</color>
        <width>4</width>
      </LineStyle>
    </Style>


    <Placemark>
      <name>Blue Line</name>
      <styleUrl>#blueLine</styleUrl>
      <LineString>
        <altitudeMode>relative</altitudeMode>
        <coordinates>
    8.645272,49.41662700000001,0
    8.693593,49.408993,0
    8.645667,49.416447,0
    8.645178,49.416057,0
    8.64531,49.415982,0
    8.642668000000001,49.413872,0
    8.641953000000001,49.41256,0
    8.645405,49.41147599999999,0
    8.647867,49.412848,0
    8.667192999999999,49.408138,0
    8.669862,49.409094,0
    8.690248,49.410926,0
    8.691844,49.411231,0
        </coordinates>
      </LineString>
    </Placemark>



  </Document>
</kml>

对可能出现的问题有什么建议吗？

【问题讨论】：

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

【解决方案1】：

kml 加载正常。我相信您的问题是 mapProp 定义中缺少逗号

而不是

var mapProp = {
  center:new google.maps.LatLng(49.4076800,8.6907900),
  zoom:11
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

应该是

var mapProp = {
  center:new google.maps.LatLng(49.4076800,8.6907900),
  zoom:11,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

始终注意控制台；）

【讨论】：

很抱歉复制代码时出错。我检查了它，这不是问题。我在上面做了更改。
API 密钥呢？您是否尝试过在没有 API 密钥的情况下调用谷歌地图库？请看jsfiddle.net/amenadiel/97B87
谢谢！！！它的工作。当我试图在没有 API 密钥
不确定。谷歌不久前更新了 Gmaps 的 TOS。但是，如果 API 密钥无效或受限制，它应该输出错误消息。 developers.google.com/maps/support/…
没有出现错误消息，地图加载完美，但没有显示 kml 图层。