如何使用Google Maps API v3和Fusion Tables打开/关闭图层？

Question

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 以下是地图副本的链接： https ： //mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html

Here is the code (sorry about the formatting) 这是代码（抱歉格式化）

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false"></script>
<link rel='stylesheet' href='stylesheet.css' />
<script type="text/javascript" src="script.js"></script>


<script type='text/javascript'>

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: 5,
        //mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        mapTypeControlOptions: {                
            position: google.maps.ControlPosition.RIGHT_TOP,
            mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']
            },

        panControl: false,
        streetViewControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL

        }
        };                  

    var map = new google.maps.Map(document.getElementById("mymap"), mapOptions);

    map.mapTypes.set('Grayscale',oceanMapType);
    map.setMapTypeId('Grayscale');

    var layer1 = new google.maps.FusionTablesLayer({
        query:{
            select: 'unique_id',
            from: '3943497'
        },
        map: map

    });

        /*
    var layer2 = new google.maps.FusionTablesLayer({

        query:{
            select: 'unique_id',
            from: '3962564'         
        },
        map: map

    }); */



    }


</script>
</head>
<body>
  <div id='mymap'></div>

# ＃

EDIT 编辑

# ＃

Ok, I got it! 好，我知道了！ Here's my code in case others are having the same question: 这是我的代码，以防其他人有同样的问题：

 <html> <head> <!-- <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script> --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false"></script> <link rel='stylesheet' href='stylesheet.css' />

 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>

Answer 1

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 更新

   <script type='text/javascript'>
    var map, layer1, layer2;
  google.load("maps", "3", {other_params:"sensor=false"});
 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: 5,
        //mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        mapTypeControlOptions: {                
            position: google.maps.ControlPosition.RIGHT_TOP,
            mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']
            },

        panControl: false,
        streetViewControl: false,
        zoomControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL

        }
    };                  

    map = new google.maps.Map(document.getElementById("mymap"), mapOptions);

    map.mapTypes.set('Grayscale',oceanMapType);
    map.setMapTypeId('Grayscale');


    layer1 = new google.maps.FusionTablesLayer({
        query:{
            select: 'unique_id',
            from: '3943497'
        },
        //map: map

    }); 


    layer2 = new google.maps.FusionTablesLayer({

        query:{
            select: 'unique_id',
            from: '3962564'         
        }
        //map: map

    }); 

    // may need to remove this line
    //layer1.setMap(map);

    }

    function old_toggleLayer(this_layer){
        if ( this_layer.getMap() ) {
            this_layer.setMap(null);
        }else{
            this_layer.setMap(map);
        }

    }

    function toggleLayer(this_layer){
        layer1.setMap(null);
        layer2.setMap(null);
        this_layer.setMap(map);

    }



</script>

Answer 2

See Turning weather layer on/off combined with other selections ; 请参阅打开/关闭天气层以及其他选择 ; I did this (with super help from Sean) for the weather/cloud layers. 我做了这个（在肖恩的超级帮助下）用于天气/云层。 I suppose you can switch on/off all other layers the same way because I have the FT-layer active also. 我想你可以用同样的方式打开/关闭所有其他层，因为我也有FT层激活。 Just rip my code and tweak it. 只需撕掉我的代码并进行调整即可。 Cheers! 干杯! Frank 坦率

如何使用Google Maps API v3和Fusion Tables打开/关闭图层？

问题描述

2 个解决方案

解决方案1
6 已采纳 2012-05-25 18:50:35

解决方案2
0 2012-05-25 16:33:23

如何使用Google Maps API v3和Fusion Tables打开/关闭图层？

问题描述

2 个解决方案

解决方案1 6 已采纳 2012-05-25 18:50:35

解决方案2 0 2012-05-25 16:33:23

解决方案1
6 已采纳 2012-05-25 18:50:35

解决方案2
0 2012-05-25 16:33:23