Question

我正在使用Google Maps API v3将KML文件调入Google地图。这是一段时间以来一直适用于我的东西，使用简单的多边形和自定义图标（地图别针）。我现在想要增强我的实现来添加在单击图标时应该打开的InfoWindows。

在我的测试kml文件中，我有1个多边形和两个图标，每个图标都包含在一个地标中。每个地标都有相关的风格。这两个图标都有一个BalloonStyle，它将在相关的InfoWindow中显示相关文本。这两个图标将在多边形内呈现。

所有三个项目都正确呈现，并且kmlStatus返回为＆＃39; OK＆＃39;。但是，InfoWindow在第一个引脚上打开（Style id =＆＃34; destPin＆＃34;），但不是第二个（Style id =＆＃34; tractPin1＆＃34;）。

我已在https://developers.google.com/maps/documentation/javascript/和其他相关网站上对此进行了2天的研究;所以我开始认为这要么是我缺乏理解，要么是谷歌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对象：

cell

...在行中包含错误：

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

......实际应该是：

   position: mapCenter,

奇怪的是，地图渲染得很好，还有kmlLayer。此外，第一个地图引脚显示其infoWindow，但该简单错误以某种方式阻止其他地标呈现其infoWindows。只是那种简单的疏忽让我花费了大量的时间;更不用说2声望。

谷歌地图KML InfoWindow无法渲染

1 个答案: