將PNG文件顯示爲嵌入式Google地圖的KML覆蓋圖時出現微妙的GOTCHA

-1

我一直在試圖獲取PNG文件以覆蓋嵌入式Google地圖上的webpage。我可以讓地圖顯示，但疊加層從不出現。我已經在StackOverflow上閱讀了數十個與KML相關的問題，並閱讀了多個在線教程，但解決方案正在逃避我。將PNG文件顯示爲嵌入式Google地圖的KML覆蓋圖時出現微妙的GOTCHA

下面是KML文件，根據該KML validator這是有效的內容：

<?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工作在谷歌地球（與<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>

我在做什麼錯？

來源

2015-12-13 user2121874

[您的KML適用於我]（http://www.geocodezip.com/v3_GoogleEx_layer-kml_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/kml/SO_20151212_GroundOverlay.kml） – geocodezip

Out of好奇心爲什麼這個問題被拒絕投票？我做錯什麼了嗎？該問題符合StackOverflow瀏覽頁面上列出的標準：https://stackoverflow.com/tour – user2121874

的答案竟然相當微妙。問題出在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 
    ) 
)

然後，它開始工作。

來源

2015-12-13 05:17:44 user2121874

您的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>

來源

2015-12-13 05:16:22 geocodezip

關鍵是google.maps.KmlLayer（）嚴格遵守它將接受的URL。我的網址沒有包含前綴「http：//」，這是破壞它的原因。做了這個簡單的改變後，它開始工作。 – user2121874

將PNG文件顯示爲嵌入式Google地圖的KML覆蓋圖時出現微妙的GOTCHA

回答

相關問題