Question

我正在尝试使用下拉菜单在浏览器中动态渲染FusionTable地图，该菜单会根据用户选择更改地图图层（从而表示位置）。

我一直在搜索网络和教程，到目前为止我已经设置了三个表并使用FusionTablesLayer向导成功创建了一个单独的Map。所以我创建了一个html文档，允许我在页面加载时显示第1层。我希望能够交换该图层/表格以与下拉菜单选择相对应。

此时我可以加载地图/下拉菜单，但是当我从菜单中选择另一个图层时，我只是为每个备用图层选择获得永久“数据可能仍在加载”平铺消息。

我对融合表和javascript都很陌生。我确信我不知道有一个简单的错误。如果你能指出我正确的方向，我会很感激。

到目前为止，我将附上我的代码。

谢谢！

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Layered Map</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
    rel="stylesheet" type="text/css">
<style>
#map-canvas { width:1250px; height:600px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">

function initialize() {
var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ';
var locationColumn = 'Lat/Long';

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(40, 265),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var layer = new google.maps.FusionTablesLayer({
      query: {
        select: locationColumn,
        from: tableId
      },
      map: map
    });

    google.maps.event.addDomListener(document.getElementById('option'),
        'change', function() {
          updateMap(layer, tableId, locationColumn);
    });
  }

  function updateMap(layer, tableId, locationColumn) {
  var option = document.getElementById('option').value;
  if (option) {
  switch(option){
  case 2: layer = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w';
          break;
  case 3: layer = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0';
          break;
  default:
  case 1: layer = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId
           break;
  }
  layer.setOptions({
      query: {
         select: locationColumn,
         from: tableId,
       }
  });
  } else {
  layer.setOptions({
    query: {
      select: locationColumn,
      from: tableId
    }
  });
  }
  }


  google.maps.event.addDomListener(window, 'load', initialize);



  </script>

  </head>
  <body>

  <div id="map-canvas"></div>
  <label>Layer</label>
  <select id="option">
  <option selected>--Select--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
  </body>
  </html>

Answer 1

表格中没有列“选项”：

function updateMap(layer, tableId, locationColumn) {
  var option = document.getElementById('option').value;
  if (option) {
             layer.setOptions({
             query: {
                select: locationColumn,
                from: tableId,
          where: "option = '" + option + "'"
        }
      });
  } else {
      layer.setOptions({
        query: {
          select: locationColumn,
          from: tableId
        }
      });
  }
}

也许“哪里”应该是“'ID'=”+选项+“'”？这将阻止“数据可能仍在加载”消息。但是从您的问题来看，听起来您想要更改表的 tableId ，而不是查询。

example using the column "ID" rather than "option"

如果您想使用其他 tableId 更新地图，这可能会有效，但您需要提供三个tableIds：

function updateMap(layer, tableId, locationColumn) {
  var option = document.getElementById('option').value;
  if (option) {
    switch(option){
      case "2": tableId = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w';
                break;
      case "3": tableId = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0';
                break;
      default:
      case "1": tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId
                break;
    }
    layer.setOptions({
          query: {
             select: locationColumn,
             from: tableId,
           },
           map: map
    });
  } else {
    layer.setMap(null);
  }
}

working example with different table ids

Fusion Table Map未正确显示图层

1 个答案: