Карта визуализации Google с таблицей приборной панели infoWindow - PullRequest
0 голосов
/ 16 февраля 2020

Я использую эту ссылку для взаимодействия карт Google с выбором таблицы.

В приведенном ниже коде это действительно взаимодействует, когда я выбираю указанную строку c в таблице и когда Я нажал на маркер. Это всплывающее окно. Но я хотел бы открыть информационное окно, когда я щелкаю выбранную строку таблицы. Я не знаю, как сделать всплывающее окно infoWindow, когда я нажимаю на таблицу и указываю строку c для содержимого информационного окна.

PS // что если я щелкну по таблице, а затем открою информационное окно, отличное от выбранного значка маркера на карте.

Редактировать // [ссылка] (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>   
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...