1

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

我一直在搜索网络和教程，到目前为止，我已经设置了三个表并使用 FusionTablesLayer 向导成功创建了一个单层地图。所以我创建了一个 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>
4

1 回答 1

0

您的表中没有“选项”列：

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'="+option+"'”？这将阻止“数据可能仍在加载”消息。但是从您的问题来看，听起来您想更改表的tableId，而不是查询。

使用列“ID”而不是“选项”的示例

如果您想使用不同的tableId更新地图，这可能有效，但您需要提供三个 tableId：

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

具有不同表 ID 的工作示例

于 2013-08-08T20:41:01.910 回答