是否可以使用复选框选择要在 Google 地图信息窗口中显示的数据？

Question

我想知道是否可以根据复选框选择来选择您希望在 Google 地图信息窗口中显示的数据/信息？

我知道您可以使用具有自己的信息窗口的复选框来选择图层，但这将限制为 5 个图层，因此将选择数量限制为 5 个。

我在想，如果您创建一个自定义信息窗口，那么您是否能够选择仅显示与该选择相关的数据并隐藏通常显示在窗口中的其他数据。您还需要根据选择的数量来缩放窗口，因此如果从 10 个中选择一个，则不会有很多空白。

干杯！

Answer 1

如果您查看 this 页面的源代码，您会看到我从我的 Fusion Table 的内容动态构建 InfoWindow 内容，因此您可以从一个复选框动态构建您的内容。

查看该代码中的函数windowControl()。

还请注意，如果您按照我的建议执行操作，则必须禁止使用标准 infoWindows，请参见此处：

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

然后，稍后在您的代码中，您实际上会在 InfoWindow 弹出时填充它：

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