Google地圖KML InfoWindow無法渲染

Question

我正在使用Google Maps API v3將KML文件調入Google地圖。這是一段時間以來一直爲我工作的東西，只有簡單的多邊形和自定義圖標（地圖引腳）。我現在想要增強我的實現，以添加InfoWindows，該圖標在單擊圖標時應該打開。

在我的測試kml文件中，我有1個多邊形和兩個圖標，每個包含在地標中。每個地標都有相關的風格。兩個圖標都有一個BalloonStyle，它將在關聯的InfoWindow中顯示相關的文本。兩個圖標將在多邊形內呈現。

所有三項都正確顯示，kmlStatus返回爲「OK」。但是，InfoWindow可以在第一個引腳（Style id =「destPin」）上正常打開，但不是第二個（Style id =「tractPin1」）。

我在https://developers.google.com/maps/documentation/javascript/和其他相關網站上研究了2天;所以我開始認爲這要麼是我的深刻理解缺乏理解，要麼是Google KML實現的一些怪癖。

這裏是.KML文件：

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
    <Document> 
     <name>example26.kml</name> 
     <Style id="destPin"> 
      <IconStyle> 
       <Icon> 
        <href>https://example.com/dest_marker.png</href> 
       </Icon> 
      </IconStyle> 
      <BalloonStyle> 
       <text><![CDATA[$[address]]]></text> 
      </BalloonStyle> 
     </Style> 

     <Style id="tractPin1"> 
      <IconStyle> 
       <Icon> 
        <href>https://example.com/pin_1.png</href> 
       </Icon> 
      </IconStyle> 
      <BalloonStyle> 
       <text><![CDATA[Census Tract $[name] <HR> $[description]]]></text> 
      </BalloonStyle> 
     </Style> 

     <Style id="tractPoly"> 
      <LineStyle> 
       <color>64000000</color> 
       <width>2</width> 
      </LineStyle> 
      <PolyStyle> 
       <color>50F00014</color> 
       <fill>1</fill> 
       <outline>1</outline> 
      </PolyStyle> 
     </Style> 

     <Placemark> 
      <name>Census Tract 322.14</name> 
      <styleUrl>#tractPoly</styleUrl> 
      <Polygon> 
       <outerBoundaryIs> 
        <LinearRing> 
         <coordinates>-122.026918,47.588168,0 -122.014066,47.588019,0 -122.00872,47.587924,0 -122.008683,47.595191,0 -122.008679,47.596783,0 -122.008692,47.596982,0 -122.007825,47.601505,0 -122.007278,47.60524,0 -122.005975,47.609314,0 -122.005302,47.61252,0 -122.004694,47.616446,0 -122.013867,47.616726,0 -122.035479,47.616536,0 -122.035478,47.605487,0 -122.035514,47.601784,0 -122.035438,47.595471,0 -122.035458,47.59174,0 -122.035448,47.588478,0 -122.035455,47.588268,0 -122.026918,47.588168,0 </coordinates> 
        </LinearRing> 
       </outerBoundaryIs> 
      </Polygon> 
     </Placemark> 

     <Placemark> 
      <address>destination address, WA</address> 
      <styleUrl>#destPin</styleUrl> 
      <Point> 
       <coordinates>-122.03388,47.6142212,0</coordinates> 
      </Point> 
     </Placemark> 

     <Placemark> 
      <name>322.14</name> 
      <description>2010 Census Population 6264 - 2015 Population Estimate 6867</description> 
      <styleUrl>#tractPin1</styleUrl> 
      <Point> 
       <coordinates>-122.022,47.603,0</coordinates> 
      </Point> 
     </Placemark> 

    </Document> 
</kml> 

...這裏是提交KML到谷歌的JavaScript。

// Displays the map for a given kml file 
    function displayMap(kmlFile) { 

     var mapOptions = { 
      position: mapCenter, 
      mapTypeControl: true, 
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
      navigationControl: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions); 
     infowindow = new google.maps.InfoWindow({}); // copied from geocodezip 

     var kmlOptions = { 
      //suppressInfoWindows: false, 
      preserveViewport: false 
      //map: map 
     }; 

     kmlLayer = new google.maps.KmlLayer(kmlFile, kmlOptions); 

     google.maps.event.addListener(kmlLayer, "status_changed", function() { 
      console.log('KML status = ', kmlLayer.getStatus()); 
     }); 

     kmlLayer.setMap(map); // this is copied from geocodezip 

    } // end of function displayMap 

Answer 1

原來我的代碼中有一個渲染地圖的錯誤。

在MapOptions對象：

var mapOptions = { 
    position: mapCenter, 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

...包含在該行的錯誤：

position: mapCenter, 

...這實際上應該是：

center: mapCenter, 

奇怪的是地圖渲染OK，以及kmlLayer。此外，第一個地圖引腳顯示其infoWindow，但該簡單的錯誤以某種方式阻止其他地標渲染其infoWindows。只是簡單的監督花費了我大量的時間;更不用說2的聲望。