更改Google在单击按钮时引用的KML文件的URL
更改Google在单击按钮时引用的KML文件的URL
提问于 2015-06-17 19:58:11
我想首先显示一个8天平均KML文件在谷歌地图的第一页加载，但允许用户点击"1天“和"3天”按钮，让谷歌地图参考那些而不是"8天“。
目标是为用户创建一个迷你模板，为H3头文本添加三组值，在Google中添加要引用的KML文件的URL，以及在地图下面的“下载KML”链接中添加HREF，用于显示世界上不同位置的卫星图像。
我试图找出如何根据用户按下的HTML按钮来替换这些值。
<!DOCTYPE html>
<html>
<head>
<title>KML Swapperooni Test</title>
</head>
<body>
<div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&signed_in=false"></script>
<h2>MARACOOS Sea Surface Temperature</h2>
<h3 id="HeaderText">8 Day Average Delaware Bay Sea Surface Temperature</h3>
<div>
<button type="button" value="1Day">1 Day Average</button>
<button type="button" value="3Day">3 Day Average</button>
<button type="button" value="8Day" autofocus>8 Day Average</button>
</div>
<div id="map-canvas" style="border: 1px solid black; height: 600px;"> </div>
<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>
<script>
// var 1Day.HeaderText = "1 Day Average Delaware Bay Sea Surface Temperature"
// var 1Day.kmlURL = "http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_1_Day_Sea_Surface_Temperature_Current.kml"
// var 3Day.HeaderText = "3 Day Average Delaware Bay Sea Surface Temperature"
// var 3Day.kmlURL = "http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_3_Day_Sea_Surface_Temperature_Current.kml"
// var 8Day.HeaderText = "8 Day Average Delaware Bay Sea Surface Temperature"
// var 8Day.kmlURL = "http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_8_Day_Sea_Surface_Temperature_Current.kml"
function initialize() {
var mapcenter = new google.maps.LatLng(38.787324, -75.162954);
var kmlURL = 'http://modata.ceoe.udel.edu/public_kmls/MARACOOS_SST/Delaware_8_Day_Sea_Surface_Temperature_Current.kml'
var mapOptions = {
zoom: 11,
center: mapcenter,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: kmlURL});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-17 20:49:41
我已经对你的数据进行了一些操作，使其更加通用。
您必须将map和ctalayers声明为全局对象，加载新的KML URL并将其呈现为：
ctaLayer = new google.maps.KmlLayer({ url: kmlURL});
ctaLayer.setMap(map);完整演示： http://jsfiddle.net/Rsp22/2209/
Stack Overflow用户
发布于 2015-06-17 20:34:10
很简单，您可以在三个分离的ctaLayer (如ctaLayer1、ctaLayer3、ctaLayer8 )中加载三个不同的KML，然后用不同的按钮调用一个onclick事件，用于调用相关的不同函数，设置对应的ctaLayer。一个ctaLayer被设置为映射，另一个设置为空
ctaLayer3.setMap(map);
ctaLayer1.setMap(null);
ctaLayer8.setMap(null);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30901235
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号