Question

我正在使用此link来将Google地图与表格选择进行交互。

在下面的代码中，当我选择表中的特定行并且单击标记信息窗口时，它确实在交互。但是，当我单击选定的表行时，我想打开信息窗口。我不知道如何在我单击表格和特定行的信息窗口内容时弹出信息窗口。

P / S //如果我单击表格，然后弹出信息窗口，而不是地图中选定的标记图标，该怎么办？

编辑// [link]（https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=fr#overview）我发现了标记聚类。在这种情况下，如何应用标记聚类来应用。

这不太重要，但是第一个应该修复。请帮忙！

//总之，我如何使用InfoWIndow添加标记，并在带有仪表板的google可视化地图中添加标记聚类。

 function drawDashboard(rows) {
       var data = google.visualization.arrayToDataTable(rows, false);
     
        var columnsTable = new google.visualization.DataTable();
        columnsTable.addColumn('number', 'colIndex');
        columnsTable.addColumn('string', 'colLabel');
        var initState= {selectedValues: []};
        // put the columns into this data table (skip column 0)
        for (var i = 1; i < data.getNumberOfColumns(); i++) {
            columnsTable.addRow([i, data.getColumnLabel(i)]);
        };
  
       var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
       
           var acPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'countryPicker_div',
            'options': {
              'filterColumnIndex': 2,
              'ui': {
                'width': 200,
                'selectedValuesLayout':'below',
                'caption':'Location',
                'labelStacking': 'vertical',
                'label': '',
                'allowTyping': false,
                'allowMultiple': true,
            }
            }
          });
          
            var statePicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'statePicker_div',
            'options': {
              'filterColumnIndex': 3,
              'ui': {
                'selectedValuesLayout':'below',
                'caption':'Station',
                'labelStacking': 'vertical',
                'label': '',
                'allowTyping': false,
                'allowMultiple': true,
              }
            }
          });
          
            var nameFilter = new google.visualization.ControlWrapper({
              'controlType': 'StringFilter',
              'containerId': 'part_div',
              'options': {
                'filterColumnIndex': 4,
                'matchType' : 'any',
                'ui': {
                'label':'',
                }
              }
            });    
              
           google.visualization.events.addListener(nameFilter, 'ready', function () {
           $('.google-visualization-controls-stringfilter input').prop('placeholder', 'Name');
            });
            
           var mapChart = new google.visualization.ChartWrapper({   
                  'chartType': 'Map',
                  'containerId': 'map_div',
                  'options': {
                    'allowHtml': true,
                    'useMapTypeControl': true,
                    'showLine' : true,
                    'mapType':'terrain',
                    'showInfoWindow': true,
                    'enableScrollWheel' : true,
                    'tooltip': { isHtml: true },
                    },
                  'view': {
                    'columns': [0, 1, 8] // row [8] for infowindow
                    },
                });
     
            var table = new google.visualization.ChartWrapper({   
                  'chartType': 'Table',
                  'containerId': 'table_div',
                  'options': {
                    'width':'100%', 'allowHtml': true,
                    'showRowNumber': false,
                    'page': 'enable',
                    'pageSize': 15,
                    'pagingSymbols': {'prev': 'prev', 'next': 'next'},                  
                    'pagingButtonsConfiguration': 'auto',  

                    },
                  'view': {
                    'columns': [2, 3, 4, 5, 6, 7]
                    },
                });
              
      dashboard.bind(acPicker,statePicker);
      dashboard.bind(statePicker,mapChart);
      dashboard.bind(statePicker,table);
      dashboard.bind(nameFilter,table);
      dashboard.bind(nameFilter,mapChart);   
       
 
    dashboard.draw(data);
    
    google.visualization.events.addListener(dashboard, 'ready', function()
      {
        google.visualization.events.addListener(table, 'select', function()
          { mapChart.getChart().setSelection(table.getChart().getSelection()); });
        google.visualization.events.addListener(mapChart, 'select', function()
          { table.getChart().setSelection(mapChart.getChart().getSelection()); });
      });

}

   <div style="align: left;" id="dashboard_div" style="margin-top: 1em;">
    <div id="map_div"></div>
    
    <div class="divTable filterpanel">
      <div class="divTableBody">
        <div class="divTableRow">
          <div class="divTableCell" id="countryPicker_div"></div>
          <div class="divTableCell" id="statePicker_div"></div>
          <div class="divTableCell" id="part_div"></div>
        </div>
      </div>
    </div>
   
     </div>
    <div id="table_div" style="padding-top: 30px;height:500px;"></div>

谷歌可视化地图与仪表板表infoWindow

0 个答案: