1

FusionTablesLayer ウィザードから生成されたコードを使用して、変更時に情報ウィンドウを開く方法を決定しようとしています。以下のコードはマーカーを完全に表示しますが、マーカーをクリックして情報ウィンドウをトリガーするのではなく、別の選択 (状態) が選択されたときに情報ウィンドウを開きたいと思います。ありがとう。

ファローアップ：

以下の geocodezip の発言に従って、次のコードはうまく機能し、素晴らしいスタートを切ることができました! サイドバーリンクではなくドロップダウンセレクターを使用するようになりました...

新しい作業コード

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>Fusion Table Markers and Sidebar</title>

  <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">

  google.load('visualization', '1', {'packages':['table']});
  var map;
  var markers = [];
  var infoWindow = new google.maps.InfoWindow();

  function initialize() {
    var us = new google.maps.LatLng(38.24676420846342, -94.82073772499997);

    map = new google.maps.Map(document.getElementById('map_canvas'), {
     center: us,
     zoom: 4,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   });


//sidebar to contain link to map marker - Sales Region - and Rep name  
    var sql = encodeURIComponent("SELECT 'State - Sales Region', 'Representative Contact', Lat, Lon FROM 5555555555 ORDER BY 'State - Sales Region'");
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql);

    query.send(getData);
  }

//simple sidebar and info window style 
  function getData(response) {
    var dt = response.getDataTable();  

    var side_html = '<table style="border-collapse: collapse" border="1" \
                       cellpadding="5"> \
                       <thead> \
                         <tr style="background-color:#e0e0e0"> \
                           <th>Area</th> \
                           <th>Name</th> \
                         </tr> \
                       </thead> \
                       <tbody>';

    for (var i = 0; i < dt.getNumberOfRows(); i++) {
      var lat = dt.getValue(i,2);
      var lng = dt.getValue(i,3);
      var area = dt.getValue(i,0);
      var pop = dt.getValue(i,1);

      var pt = new google.maps.LatLng(lat, lng);
      var html = "<strong>" + area + "</strong><br />" + pop;

      side_html += '<tr> \
                      <td><a href="javascript:myclick(' + i + ')">' + area + '</a></td> \
                      <td>' + pop + '</td> \
                    </tr>';

      createMarker(pt, html);

    }

    side_html += '</tbody> \
                </table>';
    document.getElementById("side_bar").innerHTML = side_html;
  }

//use simple default marker
  function createMarker(point,info) { 
     var marker = new google.maps.Marker({
      position: point,
      map: map
  });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.close();
      infoWindow.setContent(info);
      infoWindow.open(map,marker); 
    });
  }

  function myclick(num) {
    google.maps.event.trigger(markers[num], "click");
    map.setCenter(markers[num].getPosition());
//    map.setZoom(map.getZoom()+2);
  }


  </script>

</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 900px; height: 600px; position: absolute; left: 10px"></div>
  <div id="side_bar" style="width: 200px; height: 600px; position: absolute; left: 920px; overflow: auto;"></div>
</body>
</html>
4

1 に答える 1

1

デフォルトで FusionTablesLayer の InfoWindow を開く唯一の方法は、それをクリックすることです。外部イベントから開くには、独自の InfoWindow を作成する方法があります。FusionTable にクエリを実行し、必要な外部刺激で開くことによってコンテンツを取得します。

サイドバーを使用した例/概念実証

ドキュメントの例

于 2013-02-16T20:16:07.993 に答える