Question

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

我想使用隐藏地图上特定标记类型的按钮。例如，红色按钮仅隐藏红色标记，绿色按钮仅隐藏绿色标记。

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

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

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

有谁知道怎么做？

我的代码：

<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）

代码段：

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>

在Google Map的Fusion Layer中隐藏特定标记

2 个答案: