如何使用Google Maps API v3和Fusion Tables打开/关闭图层？(How to toggle a layer on/off using Google Maps API v3 a

如何使用Google Maps API v3和Fusion Tables打开/关闭图层？(How to toggle a layer on/off using Google Maps API v3 and Fusion Tables?)

我正在尝试制作具有多个融合表层的地图。每个融合表层将显示特定年份中与卡特尔相关的杀人案件的数量（包括所有年份的总和）。由于每个图层都具有相同的几何图形，因此我需要让用户一次查看一个图层。有没有办法使用单选按钮打开/关闭每一层？我已经搜索了几个小时的教程或示例，并且空了，所以我希望有人可以提供帮助。

以下是地图副本的链接： https ： //mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html

这是代码（抱歉格式化）

＃

编辑

＃

好，我知道了！这是我的代码，以防其他人有同样的问题：

var map; //var layArray = []; var shownLayer; var layer_sum; var layer_2007; var layer_2008; var layer_2009; var layer_2010; function toggleLayer(this_layer){ shownLayer.setMap(null); this_layer.setMap(map); shownLayer = this_layer; /*if ( this_layer.getMap() ) { this_layer.setMap(null); }else{ this_layer.setMap(map); }*/ } window.onload = function () { var oceanStyle = [ { featureType: "ocean", stylers: [ { saturation: -100 } ] }, { featureType: "all", elementType: "labels", stylers: [ { visibility: "off"} ] } ]; var oceanMapType = new google.maps.StyledMapType(oceanStyle, {name: "Grayscale"}); var myLatlng = new google.maps.LatLng(0,0); var mapOptions = { center: new google.maps.LatLng(24,-103), zoom: 6, //mapTypeId: google.maps.MapTypeId.HYBRID, mapTypeControl: true, mapTypeControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP, mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale'] }, panControl: true, streetViewControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } }; map = new google.maps.Map(document.getElementById("mymap"), mapOptions); map.mapTypes.set('Grayscale',oceanMapType); map.setMapTypeId('Grayscale'); layer_sum = new google.maps.FusionTablesLayer({ query:{ select: 'unique_id', from: '3943497' }, }); layer_2007 = new google.maps.FusionTablesLayer({ query:{ select: 'unique_id', from: '3962564' }, }); layer_2008 = new google.maps.FusionTablesLayer({ query:{ select: '2008', from: '3962469' }, }); layer_2009 = new google.maps.FusionTablesLayer({ query: { select: '2009', from: '3964318' }, }); layer_2010 = new google.maps.FusionTablesLayer({ query: { select: '2010', from: '3964517' }, }); layer_sum.setMap(map); shownLayer = layer_sum; } </script> </head> <body> <div id='mymap'></div> <div id='map-optionbar-r'> Sum of Homicides<input name="layers" type="radio" value="layer_sum" onClick="toggleLayer(layer_sum);" checked><br /> Homicides - 2007<input name="layers" type="radio" value="layer_2007" onClick="toggleLayer(layer_2007);"><br /> Homicides - 2008<input name="layers" type="radio" value="layer_2008" onClick="toggleLayer(layer_2008);"><br /> Homicides - 2009<input name="layers" type="radio" value="layer_2009" onClick="toggleLayer(layer_2009);"><br /> Homicides - 2010<input name="layers" type="radio" value="layer_2010" onClick="toggleLayer(layer_2010);"><br /> </div>

I am trying to make a map with multiple fusion table layers. Each fusion table layer will show the number of cartel-related homicides in a particular year (including the sum of all years). Since each layer has the same geometry, I need to let the user view one layer at a time. Is there a way to toggle each layer on/off using a radio button? I've searched for tutorials or examples for a few hours and have come up empty, so I'm hoping someone here can help.

Here is a link to a copy of the map: https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html

Here is the code (sorry about the formatting)

#

EDIT

#

Ok, I got it! Here's my code in case others are having the same question:

var map; //var layArray = []; var shownLayer; var layer_sum; var layer_2007; var layer_2008; var layer_2009; var layer_2010; function toggleLayer(this_layer){ shownLayer.setMap(null); this_layer.setMap(map); shownLayer = this_layer; /*if ( this_layer.getMap() ) { this_layer.setMap(null); }else{ this_layer.setMap(map); }*/ } window.onload = function () { var oceanStyle = [ { featureType: "ocean", stylers: [ { saturation: -100 } ] }, { featureType: "all", elementType: "labels", stylers: [ { visibility: "off"} ] } ]; var oceanMapType = new google.maps.StyledMapType(oceanStyle, {name: "Grayscale"}); var myLatlng = new google.maps.LatLng(0,0); var mapOptions = { center: new google.maps.LatLng(24,-103), zoom: 6, //mapTypeId: google.maps.MapTypeId.HYBRID, mapTypeControl: true, mapTypeControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP, mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale'] }, panControl: true, streetViewControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } }; map = new google.maps.Map(document.getElementById("mymap"), mapOptions); map.mapTypes.set('Grayscale',oceanMapType); map.setMapTypeId('Grayscale'); layer_sum = new google.maps.FusionTablesLayer({ query:{ select: 'unique_id', from: '3943497' }, }); layer_2007 = new google.maps.FusionTablesLayer({ query:{ select: 'unique_id', from: '3962564' }, }); layer_2008 = new google.maps.FusionTablesLayer({ query:{ select: '2008', from: '3962469' }, }); layer_2009 = new google.maps.FusionTablesLayer({ query: { select: '2009', from: '3964318' }, }); layer_2010 = new google.maps.FusionTablesLayer({ query: { select: '2010', from: '3964517' }, }); layer_sum.setMap(map); shownLayer = layer_sum; } </script> </head> <body> <div id='mymap'></div> <div id='map-optionbar-r'> Sum of Homicides<input name="layers" type="radio" value="layer_sum" onClick="toggleLayer(layer_sum);" checked><br /> Homicides - 2007<input name="layers" type="radio" value="layer_2007" onClick="toggleLayer(layer_2007);"><br /> Homicides - 2008<input name="layers" type="radio" value="layer_2008" onClick="toggleLayer(layer_2008);"><br /> Homicides - 2009<input name="layers" type="radio" value="layer_2009" onClick="toggleLayer(layer_2009);"><br /> Homicides - 2010<input name="layers" type="radio" value="layer_2010" onClick="toggleLayer(layer_2010);"><br /> </div>

最满意答案

toggleLayer(layer1); // make sure your map is a global function toggleLayer(this_layer) { if( this_layer.getMap() ){ this_layer.setMap(null); }else{ this_layer.setMap(map); } } </head> <body> <br /> Layer 1<input name="layers" type="radio" value="layer1" onClick="toggleLayer(layer1);"><br /> Layer 2<input name="layers" type="radio" value="layer2" onClick="toggleLayer(layer2);"><br />

更新

UPDATED

更多推荐