谷歌地图 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 提交给 Google 的 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,

奇怪的是地图和 kmlLayer 一起渲染得很好。此外，第一个地图图钉显示了它的 infoWindow，但是这个简单的错误以某种方式阻止了其他地标呈现它们的 infoWindow。只是这个简单的疏忽花费了我大量的时间。更不用说 2 声望了。