Javascript 是否可以使用复选框选择要在谷歌地图信息窗口中显示的数据?
我想知道是否可以根据复选框选择您希望在谷歌地图信息窗口中显示的数据/信息 我知道您可以使用复选框选择层,复选框可以有自己的信息窗口,但这将被限制为5层,从而将选择的数量限制为5 我在想,如果您创建一个自定义信息窗口,那么您将能够选择只显示与该选择相关的数据,并隐藏窗口中通常显示的其他数据。您还需要根据选择的数量缩放窗口,这样如果从10个选项中选择一个,它就不会有太多的空白Javascript 是否可以使用复选框选择要在谷歌地图信息窗口中显示的数据?,javascript,jquery,html,google-maps-api-3,google-fusion-tables,Javascript,Jquery,Html,Google Maps Api 3,Google Fusion Tables,我想知道是否可以根据复选框选择您希望在谷歌地图信息窗口中显示的数据/信息 我知道您可以使用复选框选择层,复选框可以有自己的信息窗口,但这将被限制为5层,从而将选择的数量限制为5 我在想,如果您创建一个自定义信息窗口,那么您将能够选择只显示与该选择相关的数据,并隐藏窗口中通常显示的其他数据。您还需要根据选择的数量缩放窗口,这样如果从10个选项中选择一个,它就不会有太多的空白 干杯 如果您查看页面的源代码,您可以看到我根据我的Fusion表的内容动态构建了InfoWindow内容,因此您也可以根据复
干杯 如果您查看页面的源代码,您可以看到我根据我的Fusion表的内容动态构建了InfoWindow内容,因此您也可以根据复选框动态构建内容 请参见该代码中的函数
windowControl
()
另外请注意,如果按照我的建议进行操作,则必须抑制标准信息窗口,请参见此处:
layers[id] = new google.maps.FusionTablesLayer({
map: map,
suppressInfoWindows: true,
query: {
select: 'col2',
from: tableids[id],
},
});
像这样
以后添加
基本上,以下是创建贴图和融合表图层并抑制默认窗口的代码:
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng(52.4, -1.3),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// One single re-useable InfoWindow
infoWindow = new google.maps.InfoWindow();
for(id=0;id<tableids.length;id++){
layers[id] = new google.maps.FusionTablesLayer({
map: map,
suppressInfoWindows: true,
query: {
select: 'col2',
from: tableids[id],
},
});
google.maps.event.addListener(layers[id], 'click', function(e) {
windowControl(e, infoWindow, map);
});
}
map=new google.maps.map(document.getElementById('googft-mapCanvas'){
中心:新google.maps.LatLng(52.4,-1.3),
缩放:7,
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//一个可重复使用的信息窗口
infoWindow=new google.maps.infoWindow();
对于(id=0;id谢谢!我将按照您的建议查看源代码!感谢Suppress的信息,我真的很感激!我完全理解,从您所说的,我仍然能够将所有信息显示为标准信息,而无需任何选择,并且由于它是动态构建的,因此在进行选择时,我将t是否会在窗口中更改?可能我们彼此混淆了…我想说的是,您可以根据单击时某些复选框的状态动态构建InfoWindow,这样,如果信息较少(或较多),它可以显示更多(或较少)的信息勾选了复选框。如果用户在稍后阶段单击某些复选框,我不确定在信息窗口弹出后您会如何更改它-尽管我相信一些jQuery天才可能会通过选择和隐藏div来做到这一点。啊,好吧,我明白了!谢谢!这或多或少是我想要的,放在上下文中来说,我正在尝试为用户单击后将看到的信息窗口中显示的数据创建筛选器。因此,目前不需要更新已填充的窗口。查看了源代码后,在创建自定义信息窗口时,您是否需要编写该窗口何时何地显示的代码?还是仍然是自动显示的?它会自动显示自动-所有的代码都在我提供链接的单个页面内。非常简单-我将在我的答案中添加突出部分以使其更加清晰。这太神奇了,非常感谢您的帮助,我真的非常感谢!
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
// Extract various columns from Fusion Table
var Ref =e.row['Reference'].value;
var Date=e.row['Date'].value;
var Col =e.row['Collection'].value;
// Now build HTML we want in our InfoWindow
var HTML;
HTML = "<div class='googft-info-window'>";
HTML+= "<strong>Reference</strong>: " + Ref + " ";
HTML+= "<strong>Date</strong>: " + Date + " ";
// AJAX check if image and thumb are available on Skyscan webserver.
// If both present, offer click through to zoomable image.
// If either missing, suggest user contact Skyscan
if(ImageAndThumbOnServer(Col,Ref)==1){
HTML+= "<a target=\"_blank\" href=\"http://www.skyscan.co.uk/cgi-bin/Zoomable.pl?&date=" + Date + "&ref=" + Ref + "&col=" + Col + "\">Click to view image</a>";
} else {
HTML += "Image not yet scanned contact Skyscan";
}
HTML +="</div>";
infoWindow.setOptions({
content: HTML,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}