融合表图层图：加载时隐藏图层 - 通过标记复选框根据请求显示
我有两个 Fusion Table，它们作为图层添加到地图可视化中。
- Layer1 是位置列表（单击时会出现一个信息框）
- Layer2 是多个区域的地图（导入的 kml 多边形）。每个颜色都根据天气预报着色（填充颜色）（即蓝色表示下雨的可能性很大；红色表示晴天......）
我想要的是：
- 加载时：仅显示Layer1； Layer2 仍然隐藏。
- 如果用户想要加载/查看 Layer2，他必须选中一个复选框。
我不知道该怎么做。即使有可能。
下面是我的代码。
提前致谢！
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var layer;
var tableid = 1111;
var layer2;
var tableid2 = 2222;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(10, 10),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);
layer2 = new google.maps.FusionTablesLayer(tableid2);
layer2.setQuery("SELECT 'coordenadas' FROM " + tableid2);
layer2.setMap(map);
}
function changeLayer(tableidselections) {
if (tableidselections == 1111){
if (document.getElementById("avisos").checked == true) {
if(layer.getMap() == null) { layer.setMap(map); }
}
if (document.getElementById("avisos").checked == false) {
layer.setMap(null);
}
}
if (tableidselections == 2222){
if (document.getElementById("eventos").checked == true) {
if(layer2.getMap() == null) { layer2.setMap(map); }
}
if (document.getElementById("eventos").checked == false) {
layer2.setMap(null);
}
}
}
</script>
</head>
<body onload="initialize();">
<div id="selector_box">
<table>
<tr><td>
<form id="selector_form" style="font-size:14px">
<input type="checkbox" value="1111" name="selector" id="avisos" onclick="changeLayer(this.value);">Show weather info
<!-- <input type="checkbox" value="2222" name="selector" id="eventos" onclick="changeLayer(this.value);">Eventos -->
</form>
</td></tr>
</table>
</div>
I have two Fusion Tables that are added as layers to a map visualization.
- Layer1 is a list of places (on click, an infobox appears)
- Layer2 is a map (imported kml polygons) of several regions. Each one is coloured (fill colour) according to a weather forecast (i.e. blue for high chance of rain; red for sunny...)
What I want is:
- on load: show only Layer1; Layer2 remains hidden.
- If the user wants to load/see Layer2, he has to check a checkbox.
I don't know how to do that. Even if it's possible.
Below is my code.
Thanks in advance!
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var layer;
var tableid = 1111;
var layer2;
var tableid2 = 2222;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(10, 10),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);
layer2 = new google.maps.FusionTablesLayer(tableid2);
layer2.setQuery("SELECT 'coordenadas' FROM " + tableid2);
layer2.setMap(map);
}
function changeLayer(tableidselections) {
if (tableidselections == 1111){
if (document.getElementById("avisos").checked == true) {
if(layer.getMap() == null) { layer.setMap(map); }
}
if (document.getElementById("avisos").checked == false) {
layer.setMap(null);
}
}
if (tableidselections == 2222){
if (document.getElementById("eventos").checked == true) {
if(layer2.getMap() == null) { layer2.setMap(map); }
}
if (document.getElementById("eventos").checked == false) {
layer2.setMap(null);
}
}
}
</script>
</head>
<body onload="initialize();">
<div id="selector_box">
<table>
<tr><td>
<form id="selector_form" style="font-size:14px">
<input type="checkbox" value="1111" name="selector" id="avisos" onclick="changeLayer(this.value);">Show weather info
<!-- <input type="checkbox" value="2222" name="selector" id="eventos" onclick="changeLayer(this.value);">Eventos -->
</form>
</td></tr>
</table>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
是的，你可以这样做；你的代码看起来应该可以工作。只要在
initialize方法中跳过layer2.setMap(map)，那么layer2就默认不会加载。如果您遇到问题，那么可以将完整的代码（带有实际的表 ID）发布到 jsfiddle 或其他位置并说明问题是什么。
Yes you can do this; your code seems like it should work. Just skip
layer2.setMap(map)in theinitializemethod, and then layer2 won't load by default.If you're having troubles, then maybe post your full code (with actual table ids) to jsfiddle or some other location and say what the issue is.