使用可公开访问的网址时,KML文件无法在javascript Google地图中使用

时间:2014-02-24 21:21:30

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

我正在尝试使用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>

关于可能出现什么问题的任何建议?

1 个答案:

答案 0 :(得分:0)

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
  };

始终注意控制台;)