隐藏谷歌地图融合层中的特定标记

Question

我正在使用 Fusion Layer 在谷歌地图中显示标记。

我想使用在地图上隐藏特定标记类型的按钮。例如，一个只会隐藏红色标记的红色按钮和一个只会隐藏绿色标记的绿色按钮。

我目前有 4 种标记类型，它们由从“类型”列获取数据的存储桶设置样式。

我尝试在自己的图层中显示每种标记类型，并单独隐藏图层。不幸的是 google 只允许你设置一个融合层的样式，所以我只能使用一个层来显示不同的标记类型。

如果我能弄清楚如何根据“类型”列定位标记，那么我可以隐藏特定的标记。

有人知道怎么做吗？

我的代码：

<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(37.24,-121.9000);

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: myLatlng,
      zoom: 11
    });

    var FMlayer = new google.maps.FusionTablesLayer({
      query: {
        select: 'Location',
        from: '1zJo4YLRM5VVI_djqSV229FMNFyeGaHGrcczQMSHR',
      },
      templateId: 3,
      styles: [{
        where: 'Type = 1',
        markerOptions: {
          iconName: 'large_green'
        }
      },{
        where: 'Type = 2',
        markerOptions: {
          iconName: 'large_red'
        }
      },{
        where: 'Type = 3',
        markerOptions: {
          iconName: 'large_yellow'
        }
      },{
        where: 'Type = 4',
        markerOptions: {
          iconName: 'large_blue'
        }
      }],
      map: map,
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

</script>

我的桌子看起来像这样：

Type | Name   | Location | Phone
1    | Name1  | Address1 | 555-555-5550
1    | Name2  | Address2 | 555-555-5551
2    | Name3  | Address3 | 555-555-5552
2    | Name4  | Address4 | 555-555-5553
3    | Name5  | Address5 | 555-555-5554
4    | Name6  | Address6 | 555-555-5555

标记“类型”决定了标记的样式。

Answer 1

没有办法在 FusionTable 中“隐藏”标记，您根本不能选择这些标记。

要实现它，请设置一个新查询，以便省略特定的标记。

这将设置一个查询，该查询将排除具有 Type:2（红色标记）的标记：

FMlayer.setOptions({query: {
    select: 'Location',
    from: '1zJo4YLRM5VVI_djqSV229FMNFyeGaHGrcczQMSHR',
    where:'Type not in(2)'
  }});

Answer 2

使用基于复选框状态的动态 where 子句的示例：

proof of concept fiddle

（部分基于this example in the documentation）

代码sn-p：

var FMlayer;
var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(37.24, -121.9000);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: myLatlng,
    zoom: 10
  });

  FMlayer = new google.maps.FusionTablesLayer({
    query: {
      select: 'Location',
      from: '1zJo4YLRM5VVI_djqSV229FMNFyeGaHGrcczQMSHR'
    },
    templateId: 3,
    styles: [{
      where: 'Type = 1',
      markerOptions: {
        iconName: 'large_green'
      }
    }, {
      where: 'Type = 2',
      markerOptions: {
        iconName: 'large_red'
      }
    }, {
      where: 'Type = 3',
      markerOptions: {
        iconName: 'large_yellow'
      }
    }, {
      where: 'Type = 4',
      markerOptions: {
        iconName: 'large_blue'
      }
    }],
    map: map,
  });
  google.maps.event.addDomListener(document.getElementById('t1'), 'click', updateQuery);
  google.maps.event.addDomListener(document.getElementById('t2'), 'click', updateQuery);
  google.maps.event.addDomListener(document.getElementById('t3'), 'click', updateQuery);
}

function updateQuery() {
  var whereArr = [];
  var whereStr = "";
  if (document.getElementById('t1').checked) whereArr.push("1");
  if (document.getElementById('t2').checked) whereArr.push("2");
  if (document.getElementById('t3').checked) whereArr.push("3");
  if (whereArr.length == 0) {
    FMlayer.setMap(null)
  } else {
    FMlayer.setMap(map);
  }
  /*
  for (var i = 0; i < whereArr.length; i++) {
      whereStr += whereArr[i];
      if (i < whereArr.length - 1) whereStr += ",";
  } */
  whereStr = whereArr.join(',');
  FMlayer.setQuery({
    select: 'Location',
    from: '1zJo4YLRM5VVI_djqSV229FMNFyeGaHGrcczQMSHR',
    where: 'Type IN(' + whereStr + ')'
  });
  document.getElementById('query').innerHTML = "select:" + FMlayer.getQuery().select + "<br>from:" + FMlayer.getQuery().from + "<br>where:" + FMlayer.getQuery().where;
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
Type 1 (Green)
<input type="checkbox" id="t1" checked="checked" />Type 2 (Red)
<input type="checkbox" id="t2" checked="checked" />Type 3 (Yellow)
<input type="checkbox" id="t3" checked="checked" />
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>Yellow
<div id="query"></div>