我正在尝试制作具有多个融合表层的地图。 每个融合表层将显示特定年份中与卡特尔相关的杀人案件的数量(包括所有年份的总和)。 由于每个图层都具有相同的几何图形,因此我需要让用户一次查看一个图层。 有没有办法使用单选按钮打开/关闭每一层? 我已经搜索了几个小时的教程或示例,并且空了,所以我希望有人可以提供帮助。
以下是地图副本的链接: 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>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 />更新
<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> 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>更多推荐
发布评论