如何使用 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/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>
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>
请参阅打开/关闭天气图层与其他选择相结合;我为天气/云层做了这个（在肖恩的超级帮助下）。我想你可以用同样的方式打开/关闭所有其他层，因为我也有 FT 层处于活动状态。只需翻录我的代码并调整它。干杯！弗兰克
相关文章：
- 创建一个类似链接的按钮，并通过Javascript函数打开一个新的弹出窗口
- 防止Iframe窗体在新窗口中打开
- 如何使用jQuery自动打开页面上的所有链接
- 通过js在新选项卡中有条件地打开url
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- ng打开空字符串
- 打开一个模态并将其链接到AngularJS中的指令
- 如何在输入字段中的按钮的帮助下打开日历，该字段的类型为“＝”;日期”;
- 在不打开聊天屏幕的情况下制作Zopim-ding代理
- 在事件上打开Materialize Date Picker
- 锚点元素不't使用svg时，请打开EDGE上的href
- 通过命令行/批处理文件打开页面时，将javascript代码注入Google Chrome
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 如何使用特定大小的浏览器窗口打开我的页面
- 为什么window.open不打开一个以变量形式给出的链接
- 打开/关闭按钮以显示/隐藏内容
- 单击并打开表单
- 在提交时打开thankyou.html+下载PDF
- 有没有任何方法可以使用node-js从不同的机器打开浏览器
- 如何使用 Google Maps API v3 和 Fusion Tables 打开/关闭图层
