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

见Turning weather layer on/off combined with other selections;我做了这个（在肖恩的超级帮助下）用于天气/云层。我想你可以用同样的方式打开/关闭所有其他层，因为我也有FT层激活。只需撕掉我的代码并进行调整即可。干杯!弗兰克

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

2 个答案: