Google 地图 KML 文件中未显示标记

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 <StyleMap> KmlLayer 不支持。

您的 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 一起使用（至少目前是），请使用 "standard icons"：

    <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 地图 KML 文件中未显示标记

Markers Not Showing in a Google Maps KML file

google-maps

kml

google-maps-api-3