Question

我在Google MyMaps网络应用程序中生成了一张地图。现在我想将它包含在我的页面中（但不是作为嵌入式地图！）。

我已经下载了kml文件并将其添加到html页面。除了标记没有显示外，一切都还可以。有谁知道问题是什么？

以下是我的3个文件：

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script src="http://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>
<script src="script.js"></script>
</head>
<body onload="initialize()">
<h1>Map</h1>
<div id="map" style="width:750px;height:520px;"></div>
<div id="capture"></div>
</body>
</html>

的script.js：

var map;
var src = 'http://my-website.com/map.kml';
function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
});
}
google.maps.event.addDomListener(window, 'load', initialize);

KML：

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2'>
<Document>
    <name>My Map</name>
    <description><![CDATA[]]></description>
    <NetworkLink>
        <name>locations</name>
        <Link>
            <href>http://mapsengine.google.com/map/kml?mid=zVGRYK81syB4.kFYbbKCtNMQw</href>
        </Link>
    </NetworkLink>
</Document>
</kml>

Answer 1

参见KML documentation KmlLayer不支持<StyleMap>。

您的kmz正在使用<StyleMap>来定义图标：

    <Style id='icon-960-F8971B-normal'>
        <IconStyle>
            <color>ff1B97F8</color>
            <scale>1.1</scale>
            <Icon>
                <href>http://www.gstatic.com/mapspro/images/stock/960-wht-star-blank.png</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <scale>0.0</scale>
        </LabelStyle>
    </Style>
    <Style id='icon-960-F8971B-highlight'>
        <IconStyle>
            <color>ff1B97F8</color>
            <scale>1.1</scale>
            <Icon>
                <href>http://www.gstatic.com/mapspro/images/stock/960-wht-star-blank.png</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <scale>1.1</scale>
        </LabelStyle>
    </Style>
    <StyleMap id='icon-960-F8971B'>
        <Pair>
            <key>normal</key>
            <styleUrl>#icon-960-F8971B-normal</styleUrl>
        </Pair>
        <Pair>
            <key>highlight</key>
            <styleUrl>#icon-960-F8971B-highlight</styleUrl>
        </Pair>
    </StyleMap>

您需要删除它们，如果您希望它与KmlLayer（至少目前）一起使用，请使用“标准图标”：

    <Style id='icon-960-F8971B'>
        <IconStyle>
            <color>ff1B97F8</color>
            <scale>1.1</scale>
            <Icon>
                <href>http://www.gstatic.com/mapspro/images/stock/960-wht-star-blank.png</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <scale>0.0</scale>
        </LabelStyle>
    </Style>

example with (partially) modified KMZ

标记未显示在Google Maps KML文件中

1 个答案: