Question

我使用以下代码显示我的地图加上2个单独的div。一个具有功能列表（侧边栏），一个具有infowindow点击事件的结果。当我点击地图时，我可以获得预期的行为，但侧边栏功能虽然在地图上正确标记，但不会更新＆＃34; BottomInfoWindow＆＃34; DIV。我似乎无法找到合适的地方来实现这一目标。在一个不太相关的说明中，我也想在＆＃34; BottomInfoWindow＆＃34;中显示融合表卡。 DIV，但还没有想出如何将其纳入谷歌地图。如果你知道一个很好的例子。

<style type="text/css">
html, body, #map_canvas {
    width:   900px;
    height:  550px;
    margin:  0;
    padding: 0;
}
    .infowindow * {font-size: 90%; margin: 0}
.auto-style1 {
    font-size: small;
}
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

<!-- Initialize --> 
<script type="text/javascript"> 
  google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});

var tableId ='1aa5D73bkLrD6aY7W7MaU5C4z-v6HRM6aWnhg19N5';

function  createSidebar() {
 //set the query using the parameter
  var queryText = encodeURIComponent("http://www.google.com/fusiontables/gvizdata?tq=SELECT * FROM "+tableId);
  var query = new google.visualization.Query(queryText);
  var queryText = encodeURIComponent("SELECT 'Sample Location', 'X', 'Y' FROM "+tableId);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

  //set the callback function
  query.send(getData);

}

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(createSidebar);</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 var FTresponse = null;
//define callback function, this is called when the results are returned
function getData(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  //concatenate the results into a string, you can build a table here
  fusiontabledata = "<table><tr>";
//  for(i = 0; i < numCols; i++) {
    fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(0) + "</th>";
//   }
  fusiontabledata += "</tr><tr>";

  for(i = 0; i < numRows; i++) {
//    for(j = 0; j < numCols; j++) {
      fusiontabledata += "<td><a href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 0) + "</a></td>";
//    }
    fusiontabledata += "</tr><tr>";
  }
  fusiontabledata += "</table>"  
  //display the results on the page
  document.getElementById('sidebar').innerHTML = fusiontabledata;
  document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;
}

function myFTclick(row) {
   //var description = FTresponse.getDataTable().getValue(row,0);
   var name = FTresponse.getDataTable().getValue(row,0);
   var lat =  FTresponse.getDataTable().getValue(row,2);
   var lng =  FTresponse.getDataTable().getValue(row,1);
   var position = new google.maps.LatLng(lat, lng);
   openInfoWindow(name, position);
}

function openInfoWindow(name, position) {
   // Set up and create the infowindow
   if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
   infoWindow.setOptions({
      content: '<div class="FT_infowindow"><h3>' + name + 
               '</h3></div>',
      pixelOffset: new google.maps.Size(0, 2),
      position: position
    });
    // Infowindow-opening event handler
    infoWindow.open(map);
}   

var map = null;
var infoWindow = null;

function initialize() {
//SET CENTER  
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: new google.maps.LatLng(47.68635054275792, -117.21382726097107),
      zoom: 16,
      scrollwheel:false,
      mapTypeControl: true,
      streetViewControl: false,
      overviewMapControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
// CONTROLS      
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      },
      mapTypeId: 'hybrid'
    });


  layer = new google.maps.FusionTablesLayer({suppressInfoWindows: true,
      query: { from: tableId, select: 'Y, X'}});
  layer.setMap(map);

  google.maps.event.addListener(layer, "click", function(event) {
    infoWindow.close();
    // alert("click:"+event.latLng+","+event.infoWindowHtml);
    openInfoWindow(event.row["Sample Location"].value, event.latLng);
    // infoWindow.setContent(event.infoWindowHtml);
    // infoWindow.setPosition(event.latLng);
    // infoWindow.open(map);
    document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;
  });

  infoWindow = new google.maps.InfoWindow();


//  createSidebar();
}

</script>
</head>
<body onload="initialize()">
<table style="width:100%;"><tr><td>
        <div id="map_canvas">
        </div>
</td><td>
<div id="sidebar" style="width:120px;height:550px; overflow:auto" class="auto-style1">
    </div>
</td></tr>
    <tr><td colspan="2">
        <div id="BottomInfoWindow" class="auto-style1">
        Result
        </div>
</td></tr>
</table>

Answer 1

我在此行的posted code中收到javascript错误Uncaught TypeError: Cannot read property 'infoWindowHtml' of undefined：

document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;

event函数

中没有getData

如果您想使用现有代码，请将其添加到openInfoWindow()

function openInfoWindow(name, position) {
    // Set up and create the infowindow
    if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
    infoWindow.setOptions({
        content: '<div class="FT_infowindow"><h3>' + name +
            '</h3></div>',
        pixelOffset: new google.maps.Size(0, 2),
        position: position
    });
    // Infowindow-opening event handler
    infoWindow.open(map);
    document.getElementById('BottomInfoWindow').innerHTML = infoWindow.getContent();
}

proof of concept fiddle

请注意，fusionTable定义的infoWindowHtml（您的点击侦听器在“BottomInfoWindow”DIV中显示的内容）无法从侧边栏访问，但您可以在openInfoWindow函数中重新创建它。

要使它们相同（由openInfoWindow函数格式化），还要更改fusionTablesLayer“click”处理程序：

google.maps.event.addListener(layer, "click", function (event) {
    infoWindow.close();
    // alert("click:"+event.latLng+","+event.infoWindowHtml);
    openInfoWindow(event.row["Sample Location"].value, event.latLng);
    // infoWindow.setContent(event.infoWindowHtml);
    // infoWindow.setPosition(event.latLng);
    // infoWindow.open(map);
    document.getElementById('BottomInfoWindow').innerHTML = infoWindow.getContent();
});

谷歌地图更新div与地图和侧边栏上的信息窗口事件

1 个答案: