是否可以选择使用复选框在Google地图信息窗口中显示哪些数据？ [英] Is it possible to select which data to display in Google Maps info windows using check boxes?

问题描述

我想知道是否可以根据复选框选择来选择希望显示在Google地图信息窗口中的数据/信息？ 我知道您可以使用复选框来选择图层，这些复选框可以有自己的信息窗口，但是这会限制5层，因此将选择的数量限制为5个。

我在想如果您创建自定义信息窗口，那么您是否可以选择仅显示与该选择相关的数据并隐藏通常显示在窗口中的其他数据。您还需要缩放窗口，具体取决于选择的数量，所以如果从10中选择一个，它将不会有很多空白。

干杯！

解决方案

如果您查看这个页面你可以看到我从Fusion Table的内容动态地创建了InfoWindow内容，所以你可以从一个复选框中动态地构建你的内容。

请参阅该代码中的 windowControl （）

还要注意，如果你按照我的建议去做，可以压制标准的infoWindows，看看这里：

  layers [id] = new google.maps.FusionTablesLayer （{
 map：map，
 suppressInfoWindows：true，
 query：{
 select：'col2'，
 from：tableids [id]，
 }，
}）; 
  

像这样

ADDED基本上，这里是创建地图和Fusion Table图层的代码并压制默认窗口：
$ b

$ b

  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 
}）; 
 
 //一个可重复使用的InfoWindow 
 infoWindow = new google.maps.InfoWindow（）; 
 
（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）; 
}）; 
} 
  

然后，在后面的代码中，实际上会填充InfoWindow，因为它会弹出：

$ $ p $ //在点击的位置打开信息窗口
function windowControl（e，infoWindow，map）{

//从Fusion Table中提取各列
var Ref = e.row ['Reference']。value;
var Date = e.row ['Date']。value;
var Col = e.row ['Collection']。value;

//现在，在我们的InfoWindow
var HTML中构建HTML;
HTML =< div class ='googft-info-window'>;
HTML + =< strong>参考资料< / strong>：+ Ref +;
HTML + =< strong>日期< / strong>：+日期+& nbsp;& nbsp;;

// AJAX检查Skyscan网络服务器上是否有图片和缩略图。
//如果两者都存在，则提供点击通过可缩放图像。
//如果缺少，建议用户联系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 +\>点击查看图片< / a>;

}其他{
HTML + =图像尚未扫描联系Skyscan;
}
HTML + =< / div>;

infoWindow.setOptions（{
content：HTML，
position：e.latLng，
pixelOffset：e.pixelOffset
}）;
infoWindow.open（map）;
}


I was wondering if it is possible to select what data/information you wish to have displayed in an Google Maps info window based on check box selection?

I know that you can select layers using check boxes which can have their own info window, but this will be limited 5 layers thus limiting the number of selections to 5.

I was thinking that if you create a custom info window then would you be able to chose to only show data respective to that selection and hide the other data normally displayed in the window. You would also need to scale the window depending on the number of selections so if one was selected out of 10 it wouldn't have lots of white space.

Cheers!

解决方案

If you look at the source for this page you can see I build up the InfoWindow content dynamically from the content of my Fusion Table so you could build your content dynamically from a checkbox just the same.

See function windowControl() in that code.

Note also that you have to suppress the standard infoWindows if you do what I suggest, see here:

    layers[id] = new google.maps.FusionTablesLayer({
        map: map,
        suppressInfoWindows: true,
        query: {
            select: 'col2',
            from: tableids[id],
        },
    });

like this

ADDED LATER

Basically, here is the code to create the map and Fusion Table layers and suppress the default window:

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);
        });
}

Then, later on in your code, you actually populate the InfoWindow as it pops up:

// 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 + "&nbsp;&nbsp;";

// 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);
}

这篇关于是否可以选择使用复选框在Google地图信息窗口中显示哪些数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！