2015-11-02 193 views
0

我想顯示的地圖,放大到一個郵編,然後將國會區疊加到地圖。疊加是在這裏:https://www.google.com/fusiontables/DataSource?snapid=S506424n-DY谷歌地圖 - 加載KML覆蓋

我下載KML鏈接文件,並將其保存到我的本地IIS服務器。但是,覆蓋層永遠不會被繪製。

我還增加了以下MIME類型,以我的IIS服務器:

.kml application/vnd.google-earth.kml+xml 
.kmz application/vnd.google-earth.kmz 

KML文件看起來是這樣的:

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
<NetworkLink> 
<name><![CDATA[2012 US Congressional Districts]]></name> 
<Link> 
<href> 
https://www.google.com/fusiontables/exporttable?query=select+col5+from+1QlQxBF17RR-89NCYeBmw4kFzOT3mLENp60xXAJM&amp;o=kmllink&amp;g=col5</href> 
</Link> 

我的HTML/JavaScript的樣子:

<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script> 
<script language="javascript"> 
var map; 
var marker; 
function showAddress() { 
    $("#divGoogleMap").css('display', ''); 
    var mapProp = { 
     center: new google.maps.LatLng(51.508742, -0.120850), 
     zoom: 11, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById("divGoogleMap"), mapProp); 

    myListener = google.maps.event.addListener(map, 'click', function (event) { 
     placeMarker(event.latLng); 
    }); 
    google.maps.event.addListener(map, 'drag', function (event) { 
     placeMarker(event.latLng); 
    }); 

    var zipCode = $("#txtZip").val(); 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': zipCode }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      //Got result, center the map and put it out there 
      var pos = results[0].geometry.location; 
      saveLocation(pos); 
      map.setCenter(pos); 
      marker = new google.maps.Marker({ 
       map: map, 
       draggable: true, 
       position: pos 
      }); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    var kmlUrl = '/DesktopModules/HelloWorld/2012_US_Congressional_Districts.kml'; 
    var kmlOptions = { 
     suppressInfoWindows: true, 
     preserveViewport: false, 
     map: map 
    }; 
    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); 

} 
function placeMarker(location) { 
    if (marker) { 
     marker.setPosition(location); 
    } else { 
     marker = new google.maps.Marker({ 
      position: location, 
      map: map, 
      draggable: true 
     }); 
     google.maps.event.addListener(marker, "drag", function (mEvent) { 
      populateInputs(mEvent.latLng); 
     }); 
    } 
    saveLocation(location); 
} 
function saveLocation(pos) { 
    $("#hfLatitude").val(pos.lat()); 
    $("#hfLogitude").val(pos.lng()); 
} 
</script> 

<table cellpadding="2" cellspacing="2" border="0"> 
    <tr> 
     <td> 
      <asp:TextBox ID="txtZip" ClientIDMode="Static" runat="server"></asp:TextBox> 
     </td> 
     <td> 
      <input type="button" id="btnSearch" value="Search" onclick="showAddress()" /> 
     </td> 
    </tr> 
</table> 
<div id="divGoogleMap" style="width: 800px;height: 600px;display: none;"></div> 
<asp:HiddenField ID="hfLatitude" ClientIDMode="Static" runat="server" /> 
<asp:HiddenField ID="hfLongitude" ClientIDMode="Static" runat="server" /> 

我在這裏做錯了什麼?

回答

0

在谷歌地圖使用日KML必須位於一個可訪問服務器E不在本地。

這是谷歌文檔格式。

概述

的谷歌地圖API支持 的KML和GeoRSS數據格式顯示地理信息。這些數據格式使用KmlLayer對象顯示在地圖上 ,其構造函數採用可公開訪問的KML或GeoRSS文件的URL。

構造帶可公開訪問的KML的網址。

那麼對於yoour需要你必須把你的KML在可公開訪問的服務器

我已經忘記了,我已經有過類似的經歷,幾年前和解決方案正是爲了放置文件KML訪問的服務器上來自網絡。 。

+0

我設置顯示回來,當我按一下按鈕:$( 「#divGoogleMap」)的CSS( '顯示', '');問題不在於地圖沒有顯示出來。地圖確實出現。只是不要覆蓋。 –

+0

只爲yucks。我刪除了顯示:無。同樣的問題... –

+0

然後在這種情況下可能是一個路徑問題。檢查kml – scaisEdge