如何使用Google Maps API v3和Fusion Tables打開/關閉圖層？

Question

我正在嘗試制作具有多個融合表層的地圖。 每個融合表層將顯示特定年份中與卡特爾相關的殺人案件的數量（包括所有年份的總和）。 由於每個圖層都具有相同的幾何圖形，因此我需要讓用戶一次查看一個圖層。 有沒有辦法使用單選按鈕打開/關閉每一層？ 我已經搜索了幾個小時的教程或示例，並且已經空了，所以我希望有人可以提供幫助。

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

這是代碼（抱歉格式化）

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

＃

編輯

＃

好，我知道了！ 這是我的代碼，以防其他人有同樣的問題：

 <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 />

更新

   <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

請參閱打開/關閉天氣層以及其他選擇 ; 我做了這個（在肖恩的超級幫助下）用於天氣/雲層。 我想你可以用同樣的方式打開/關閉所有其他層，因為我也有FT層激活。 只需撕掉我的代碼並進行調整即可。 干杯! 坦率

如何使用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