Question

这是我的第一个Google Maps js项目。我已经使用谷歌地球一段时间了。我有一个页面，其中包含KML URL的下拉列表。最初，地图需要以选定点为中心。这项工作找到了。在下拉列表选择之后，它需要加载KML文件。我使用的KML文件与Google地球中使用的文件相同。我正在查看Chrome并且看不到任何错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Test Google Maps Project\</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://www.google.com/jsapi?key=MY_API_KEY" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript">
     var map;
     function initialize() 
     {
      var csmap = new google.maps.LatLng(40.8471706333333,-72.6395958166667);
      var mapOptions = 
      {
        zoom: 15,
        center: csmap 
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
     }

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

     function fetchKmlFromOption() {
      //Load the selected KML
      var kmlUrlBox = document.getElementById('KMLSelector');
      var kmlUrl = kmlUrlBox.value;
      if (kmlUrl !='Clear') {
        var geoLayer = new google.maps.KmlLayer(kmlUrl);
        geoLayer.setMap(map);
      }
     }

    </script>
  </head>
  <body onload="initialize()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;"  bgcolor="#E6CFCF">
    <CENTER>
    <div id="main">
     <H1>Test Google Maps - KML Loader</H1>
     <H2>Google Maps API Demo</H2>
     Select KML option :
      <select id='KMLSelector' onchange='fetchKmlFromOption()'>
       <option value='Clear'>Clear loaded KML</option>
       <option value='THIS-IS-FIRST-KML-URL'>Fetch First KML</option>
       <option value='THIS-IS-SECOND-KML-URL'>Fetch Second KML</option>
       <option value='THIS-IS-THIRD-KML-URL'>Fetch Third KML</option>
      </select>
      <BR>
      <div id="map-canvas" style="width: 1000px; height: 600px;"></div>
    </div>
    <br>
    </CENTER>
  </body>
</html>

Answer 1

有多个问题

（次要）你调用初始化2次：

<body onload="initialize()" ....>

和

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

删除1个电话。

网址包含非法字符（空格），通过encodeURI
每次从列表中选择图层时都会创建一个新图层，但图层数量有限制

3层中有2层有点大，文件大小限制为3MB（这些层的大小为3MB）。文档不清楚大小限制是应用于单个图层还是所有图层，但是它看起来与所有图层有关。因此，当您加载3MB图层时，无法加载更多图层。可能的解决方案：始终只加载一个层：

function fetchKmlFromOption() {
  //use a single layer
   if(!map.get('kml')){
     map.set('kml',new google.maps.KmlLayer);
   }
   kml=map.get('kml');
  //Load the selected KML
  var kmlUrlBox = document.getElementById('KMLSelector'),
      kmlUrl = kmlUrlBox.value,
      kml=map.get('kml');

  if (kmlUrl !='Clear'){
    kml.setValues({'url':encodeURI(kmlUrl),map:map});

  }else{
    kml.setMap(null);
  }
 }

虽然可以加载图层，但在使用此样式作为地标时，您将看不到任何内容：
```
 <Style id="hideLabel">
  <LabelStyle>
   <scale>0</scale>
  </LabelStyle>
 </Style>
```

需要帮助加载KML - 这是我的第一个Google Maps项目

1 个答案: