需要帮助加载KML -这是我的第一个谷歌地图项目

Need help loading KML - this is my first Google Maps project

本文关键字：我的 第一个 谷歌地图 项目 帮助 加载 KML      更新时间：2023-09-26

这是我的第一个Google Maps js项目。我使用谷歌地球已经有一段时间了。我有一个页面，其中有一个KML url的下拉列表。最初，地图需要以选定的点为中心。这是可行的。下拉选择之后，它需要加载一个KML文件。我使用的KML文件与Google Earth中使用的相同。我正在用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>

有很多问题

  1. (次要)你调用initialize 2次:

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

    和

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

    删除1个呼叫。

  2. url包含非法字符(空格)，通过encodeURI

    3. 对url进行编码

  3. 每次你从列表中选择一个图层，你都会创建一个新图层，但是图层数量是有限制的

  4. 3层中的2层有点大，文件大小限制为3MB(这些层的大小为3MB)。文档没有明确说明大小限制是适用于单个层还是所有层，但看起来它与所有层都有关。因此，当您加载一个3mb的层时，您无法加载其他层。可能的解决方案:总是只加载一个层:

    函数fetchKmlFromOption() {//使用一个单层如果(! map.get (kml)) {地图。设置(kml,新的google.maps.KmlLayer);}kml = map.get (kml);//加载选择的KMLvar kmlUrlBox = document.getElementById('KMLSelector')，kmlUrl = kmlUrlBox.value;kml = map.get (kml); 
    if (kmlUrl !='Clear'){kml.setValues({"url":encodeURI (kmlUrl),地图:地图});
    其他}{kml.setMap(空);}}

  5. 虽然图层可以被加载，但是当你对placemarks使用这个样式时，你将看不到任何东西:

     <Style id="hideLabel">
  <LabelStyle>
   <scale>0</scale>
  </LabelStyle>
 </Style>
相关文章：