Question

我一直试图在webpage上将PNG文件叠加到嵌入式Google地图上。我可以让地图显示，但叠加层永远不会出现。我已经在StackOverflow上阅读了几十个与KML相关的问题，并阅读了多个在线教程，但解决方案正在逃避我。

以下是根据此KML validator：

生效的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()对您传递的网址严格，因此您必须包含前缀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文件显示为嵌入式Google地图的{K44叠加层'时，微妙的GOTCHA

2 个答案: