将 PNG 文件作为 KML 叠加层显示到嵌入式 Google 地图时出现微妙的 GOTCHA

Question

一段时间以来，我一直在尝试让 PNG 文件覆盖在 webpage 上的嵌入式 Google 地图之上。我可以显示地图，但叠加层从未出现。我在 Whosebug 上阅读了数十个 KML 相关问题，并阅读了多个在线教程，但解决方案正在逃避我。

，这是有效的 KML 文件的内容

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<GroundOverlay><name>Coverage-Map.png</name><color>88ffffff</color><Icon>
<href>http://test.wotus.com/static/img/Sequential-Coverage-Map.png</href>
<viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox>
<north> 32.90783</north>
<south> 32.53544</south>
<east>-116.5492</east>
<west>-116.9882</west>
</LatLonBox></GroundOverlay></kml>

KML 在 Google 地球中工作（<href> 标签调整为指向本地），并且 PNG 被正确覆盖。

这里是 html 和 javascript:

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" href="/static/css/wotus.css" rel="stylesheet" media="screen">
    <link type="text/css" href="/static/js/jquery-ui-1.9.1.custom/css/south-street/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" />
    <link rel="shortcut icon" href="/static/img/favicon.ico">
    <script type="text/javascript" src="/static/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.min.js"></script>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
    <script type="text/javascript">
        function initMap() {
            var mapOpts = {
                center: new google.maps.LatLng(32.721635, -116.7687),
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };

            new google.maps.KmlLayer( "test.wotus.com/static/img/Coverage-Map.kml" ).setMap(
                new google.maps.Map(
                    document.getElementById(
                        'gmap_canvas'
                    ),
                    mapOpts
                )        
            )
        }
    </script>
<script type="text/javascript">
    function initialize() {
        initMap();
    }
</script>

<meta charset="UTF-8">
<title>WOTUS Coverage</title>
<img src="/media/branding/img/antenna.png" class="rightAnchor" alt=""/>
</head>
<body id="wotusbody" style="background-image:url(/media/branding/img/sunset-2-70per.png)" onload="initialize()">

<header id=page_header>
    <img src="/media/branding/img/WOTUS.png" alt="Wireless of the United States" class="Logo"/>
    <nav>
        <ul id="navbar">
            <li><a href="/wotus/home" class="Tabs">Home</a></li>
            <li><a href="/wotus/about" class="Tabs">About Us</a></li>
            <li><a href="/wotus/membership" class="Tabs">Membership Plans</a></li>
            <li><a href="/wotus/coverage" id="onlink" class="Tabs">Coverage Map</a></li>
             <li><a href="/wotus/testimonials" class="Tabs">Testimonials</a></li> 
              <li><a href="/wotus/affiliates" class="Tabs">Affiliates</a></li>  
            <li><a href="/wotus/contact" class="Tabs">Contact Us</a></li>
        </ul>
    </nav>
</header>

<div id="Content"><br/>

    <div style="overflow:hidden;height:500px;width:600px;margin-left:auto;margin-right:auto;padding:0;">
        <div id="gmap_canvas" style="height:500px;width:600px;margin-left:auto;margin-right:auto;padding:0;"></div>
        <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
    </div>
</div>
</body>
</html>

我做错了什么？

Answer 1

你的KML file works as posted on my server.

如果我使用记录的方式加载 KML 层，它也可以从您的服务器运行：

代码片段：

function initMap() {
  var mapOpts = {
    center: new google.maps.LatLng(32.721635, -116.7687),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('gmap_canvas'), mapOpts);
  var kmlLayer = new google.maps.KmlLayer({
    map: map,
    url: "http://test.wotus.com/static/img/Coverage-Map.kml"
  })
  google.maps.event.addListener(kmlLayer, 'status_changed', function() {
    document.getElementById('status').innerHTML = kmlLayer.getStatus();
  });
}

google.maps.event.addDomListener(window, 'load', initMap);

body,
html,
#gmap_canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="status"></div>
<div id="gmap_canvas"></div>

Answer 2

结果证明答案相当微妙。问题出在 javascript。事实证明，google.maps.KmlLayer() 对你传递给它的 URL 是严格的，所以你必须包含前缀 http://。这不是隐含的，这似乎很奇怪，所以这是一个您需要注意的 GOTCHA。

为了清楚起见，我更改了：

new google.maps.KmlLayer( "test.wotus.com/static/img/Coverage-Map.kml" ).setMap(
    new google.maps.Map(
        document.getElementById(
            'gmap_canvas'
        ),
        mapOpts
    )
)

收件人：

new google.maps.KmlLayer( "http://test.wotus.com/static/img/Coverage-Map.kml" ).setMap(
    new google.maps.Map(
        document.getElementById(
            'gmap_canvas'
        ),
        mapOpts
    )
)

然后它开始工作了。

将 PNG 文件作为 KML 叠加层显示到嵌入式 Google 地图时出现微妙的 GOTCHA

Subtle GOTCHA when displaying a PNG file as a KML overlay to an embedded Google Map

javascript

html

google-maps

kml