更改Google地圖在按鈕點擊時引用的KML文件的網址

我想在首次加載Google地圖時首先顯示8天平均KML文件，但允許用戶點擊「1天」和「 3天「按鈕讓Google地圖引用這些按鈕，而不是」8天「。更改Google地圖在按鈕點擊時引用的KML文件的網址

目標是爲用戶創建一個迷你模板，以便爲H3頭文本添加三組值，在Google地圖中引用的KML文件的URL以及「下載KML」鏈接中的HREF URL在地圖下方將顯示幾個頁面，這些頁面將顯示世界各地的衛星圖像。

我想弄清楚如何替換值取決於用戶按下的HTML按鈕。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>KML Swapperooni Test</title> 
 
</head> 
 
<body> 
 
\t <div> 
 
\t \t 
 
\t \t \t <script src="https://maps.googleapis.com/maps/api/js?v=3&signed_in=false"></script> 
 
\t \t \t 
 
\t \t \t <h2>MARACOOS Sea Surface Temperature</h2> 
 
\t \t \t <h3 id="HeaderText">8 Day Average Delaware Bay Sea Surface Temperature</h3> 
 
\t \t \t 
 
\t \t \t <div> 
 
\t \t \t \t <button type="button" value="1Day">1 Day Average</button> 
 
\t \t \t \t <button type="button" value="3Day">3 Day Average</button> 
 
\t \t \t \t <button type="button" value="8Day" autofocus>8 Day Average</button> 
 
\t \t \t </div> 
 

 
\t \t \t <div id="map-canvas" style="border: 1px solid black; height: 600px;">&nbsp;</div> 
 
\t \t \t 
 
\t \t \t <p><a id="kmlLink" href='http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_8_Day_Sea_Surface_Temperature_Current.kml'>Download KML</a></p> 
 
\t \t \t 
 
\t \t \t <script> 
 
\t \t \t \t // var 1Day.HeaderText = "1 Day Average Delaware Bay Sea Surface Temperature" 
 
\t \t \t \t // var 1Day.kmlURL = "http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_1_Day_Sea_Surface_Temperature_Current.kml" 
 
\t \t \t \t // var 3Day.HeaderText = "3 Day Average Delaware Bay Sea Surface Temperature" 
 
\t \t \t \t // var 3Day.kmlURL = "http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_3_Day_Sea_Surface_Temperature_Current.kml" 
 
\t \t \t \t // var 8Day.HeaderText = "8 Day Average Delaware Bay Sea Surface Temperature" 
 
\t \t \t \t // var 8Day.kmlURL = "http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_8_Day_Sea_Surface_Temperature_Current.kml" 
 
\t \t \t \t 
 
\t \t \t function initialize() { 
 
\t \t \t var mapcenter = new google.maps.LatLng(38.787324, -75.162954); 
 
\t \t \t var kmlURL = 'http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_8_Day_Sea_Surface_Temperature_Current.kml' 
 
\t \t \t var mapOptions = { 
 
\t \t \t  zoom: 11, 
 
\t \t \t  center: mapcenter, 
 
\t \t \t  mapTypeId: google.maps.MapTypeId.SATELLITE 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
\t \t \t 
 
\t \t \t var ctaLayer = new google.maps.KmlLayer({ 
 
\t \t \t  url: kmlURL}); 
 
\t \t \t ctaLayer.setMap(map); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t google.maps.event.addDomListener(window, 'load', initialize); 
 
\t \t \t 
 
\t \t \t </script> 
 
\t \t \t \t 
 
\t </div> 
 
</body> 
 
</html>

來源

2015-06-17 cpuguru

我已經操縱你的數據位，以便更爲通用。

您必須聲明地圖和ctalayers作爲全局對象，加載新的KML URL，並將其呈現到地圖爲：

ctaLayer = new google.maps.KmlLayer({ url: kmlURL}); 
ctaLayer.setMap(map);

完整的示例： http://jsfiddle.net/Rsp22/2209/

來源

2015-06-17 20:49:41 Theodore

是容易的，你可以在三個分開ctaLayer如ctaLayer1，ctaLayer3，ctaLayer8 然後用不同的按鈕調用onclick事件的呼叫相關的不同的功能設置加載三個不同的KML相應的ctaLayer。一個ctaLayer設置爲地圖和其他要空如

ctaLayer3.setMap(map); 
    ctaLayer1.setMap(null); 
    ctaLayer8.setMap(null);

來源

2015-06-17 20:34:10 scaisEdge

更改Google地圖在按鈕點擊時引用的KML文件的網址

回答

相關問題