我试图绘制一张包含多个聚合表层的地图。 每个聚合表层将显示特定年份与卡特尔有关的杀人案件的数量(包括所有年份的总和 ) 。 由于每个层都有相同的几何结构, 我需要让用户一次查看一个层 。 是否有办法使用无线电按钮对每个层进行上下切换? 我搜索了几个小时的教程或示例, 并空了出来, 我希望这里有人能帮忙 。
这里是地图副本的链接 : < a href="https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html" rel="nofollow" >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>
#
编辑 编辑 编辑 编辑 编辑 编辑
#OK,我知道了,这里是我的代码 以防其他人有同样的问题
<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>