标记不显示在谷歌地图KML文件

我已经在Google MyMaps web应用程序中生成了一张地图。现在我想把它包含到我的页面中(但不是作为嵌入的地图!)。

我已经下载了一个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>

请参阅KML文档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>

(部分)修改KMZ的示例

相关内容

最新更新

热门标签：