Question

使用FusionTablesLayer向导生成的代码，我试图确定如何打开信息窗口onchange。下面的代码完美地显示了标记，但我希望在选择不同的选择（状态）时打开信息窗口，而不是单击标记来触发信息窗口。感谢。

跟进：

按照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>

Answer 1

默认情况下，在FusionTablesLayer上打开InfoWindow的唯一方法是单击它。要从外部事件打开它，一个选项是创建自己的InfoWindow。通过查询FusionTable并打开你想要的任何外部刺激来检索内容。

Example/proof of concept with a sidebar

Example from the documentation

打开Fusion Table Layer信息窗口onchange

1 个答案: