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

以下是代码（对格式化抱歉）

 < script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false>< / script> 
< link rel ='stylesheet'href ='stylesheet.css'/> 
< script type =text / javascriptsrc =script.js>< / script> 
 
 
< script type ='text / javascript'> 
 
 window.onload = function（）{
 
 var oceanStyle = [
 {
 featureType：ocean，
 stylers：[ 
 {饱和度：-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：{
位置：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'）; 
 $ b var layer1 = new google.maps.FusionTablesLayer（{
 query：{
 select：'unique_id'，
 from：'3943497'
} ，
 map：map 
 
}）; 
 $ b $ * b $ b 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 type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false>< /脚本> 
 
< 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; 
 $ b $ * if（this_layer.getMap（））{
 
 this_layer.setMap（null）; 
 
} else {
 
 this_layer.setMap（map）; 
 
 
 
 
 
 
 window.onload = function（）{
 
 
 
 var oceanStyle = [
 
 {
 
 featureType：ocean，
 
 stylers：[
 $ b {饱和度：-100} 
 
] 
 
}，
 
 {
 
 featureType： all，
 
 elementType：labels，
 
 stylers：[
 
 {visibility：off} 
 
] 
 
} 
 
 
 
]; 
 
 
 $ b 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：{
 
位置：google.maps.ControlPosition.RIGHT_TOP，
 $ b $ mapTypeIds：[google.maps.MapTypeId.HYBRID，'灰度'] 
 
}，
 
 
 
 panControl：true，
 
 streetViewControl：false，
 $ b 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（{
 
查询：{
 
 select：'unique_id'，
 
 from：'3943497'
 
}，
 
 
 
}） ; 
 
 
 
 
 
 layer_2007 =新google.maps.FusionTablesLayer（{
 
 
 
查询：{
 
 select：'unique_id'，
 
 from：'3962564'
 
}，
 
 
 
}）; 
 
 
 
 layer_2008 =新google.maps.FusionTablesLayer（{
 
 
 
查询：{
 
 select：'2008'，
 
 from：'3962469'
 
}，
 
 
 
}） ; 
 
 
 
 layer_2009 =新增google.maps.FusionTablesLayer（{
 
 
 
查询：{
 
选择：'2009'，
 
来自：'3964318'
 
}，
 
}）; 
 
 
 
 layer_2010 =新google.maps.FusionTablesLayer（{
 
 
 
查询：{
 
选择：'2010'，
 
来自：'3964517'
 
}，
 
}）; 
 
 
 
 layer_sum.setMap（map）; 
 
 shownLayer = layer_sum; 
 
 
 
 
 
} 
 
 
 
 
 
 < ; /脚本> 
 
< / head> 
 
< body> 
 
< div id ='mymap'>< / div> 
 
< div id ='map-optionbar-r'> 
 
命案总和< input name =layerstype =radiovalue =layer_sumonClick =toggleLayer（layer_sum）;检查>< br /> 
 
 Homicides  -  2007< input name =layerstype =radiovalue =layer_2007onClick =toggleLayer（layer_2007）;>< br /> 
 
凶杀案 -  2008< input name =layerstype =radiovalue =layer_2008onClick =toggleLayer（layer_2008）;>< br /> 
 
 Homicides  -  2009< input name =layerstype =radiovalue =layer_2009onClick =toggleLayer（layer_2009）;>< br /> 
 
 Homicides  -  2010< input name =layerstype =radiovalue =layer_2010onClick =toggleLayer（layer_2010）;>< br /> 
 
< / div> 
  

解决方案

  toggleLayer（layer1）; 
 //确保您的地图是全局
函数toggleLayer（this_layer）
 {
 if（this_layer.getMap（））{
 this_layer.setMap（null） ; 
} else {
 this_layer.setMap（map）; 
} 
} 
< / head> 
< body> 
< br /> 
第1层< input name =layerstype =radiovalue =layer1onClick =toggleLayer（layer1）;>< br /> 
第2层< input name =layerstype =radiovalue =layer2onClick =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：[
 {饱和度：-100} 
] 
}，
 {
 featureType：all，
 elementType：labels，
 stylers：[
 {知名度：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：{
位置：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（{
 
查询：{
 select：'unique_id'，
 from：' 3962564'
} 
 // map：map 
 
}）; 
 
 //可能需要删除这行
 //layer1.setMap（map）; 
 
 
 
函数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> 
  

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)

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

解决方案

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>

这篇关于如何使用Google Maps API v3和Fusion Tables切换图层开启/关闭？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！