1

ユーザーの選択に基づいてマップレイヤー (したがって、表示される場所) を変更するドロップダウンメニューを使用して、ブラウザーで FusionTable マップを動的にレンダリングしようとしています。

私はネットとチュートリアルを精査してきましたが、これまでに 3 つのテーブルをセットアップし、FusionTablesLayer ウィザードを使用して単一のレイヤード マップを正常に作成しました。そこで、ページの読み込み時にレイヤー 1 を表示できるようにする HTML ドキュメントを作成しました。ドロップダウンメニューの選択に対応するように、そのレイヤー/テーブルを交換できるようにしたいと思います。

この時点で、マップ/ドロップダウン メニューを読み込むことができますが、メニューから別のレイヤーを選択すると、代替レイヤーの選択ごとに永続的な「データがまだ読み込まれている可能性があります」というタイル メッセージが表示されます。

私は融合テーブルと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でマップを更新したい場合、これでうまくいくかもしれませんが、次の 3 つの 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 に答える