Как получить список строк из FusionTablesLayer и связать его с картой - PullRequest
Новая
       45

Как получить список строк из FusionTablesLayer и связать его с картой

0 голосов
/ 24 мая 2018

У меня есть карта Google, созданная с использованием FusionTablesLayer

Как получить список строк из этого FusionTablesLayer и связать его с картой.Чтобы щелкнуть по элементу из списка, на карте был открыт шарик.

Вот пример карты http://air -in.ru / ajax / chat / test.php

Это пример того, как должна выглядеть карта.

how map should look

<body>
<style type="text/css">
    html, body, #googft-mapCanvas {
        height: 100% !important;
        margin: 0;
        padding: 0;
        width: 100% !important;
    }
</style>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBxMTfLhegh_rO8w0-vRP_oKdaJOvhOUUI"></script>

<script type="text/javascript">
    function initialize() {
        var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
            (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
        if (isMobile) {
            var viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
        }
        var mapDiv = document.getElementById('googft-mapCanvas');
        mapDiv.style.width = isMobile ? '100%' : '500px';
        mapDiv.style.height = isMobile ? '100%' : '300px';

        var map = new google.maps.Map(mapDiv, {
            center: new google.maps.LatLng(56.32085914650647, 62.40977352913535),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

        layer = new google.maps.FusionTablesLayer({
            map: map,
            heatmap: { enabled: false },
            query: {
                select: "col0",
                from: "1XlnmbK0m0s4rHdadG_hkmZP-dSr2ruBzQxnMK4Uv",
                where: ""
            },
            options: {
                styleId: 2,
                templateId: 2
            }
        });


        if (isMobile) {
            var legend = document.getElementById('googft-legend');
            var legendOpenButton = document.getElementById('googft-legend-open');
            var legendCloseButton = document.getElementById('googft-legend-close');
            legend.style.display = 'none';
            legendOpenButton.style.display = 'block';
            legendCloseButton.style.display = 'block';
            legendOpenButton.onclick = function() {
                legend.style.display = 'block';
                legendOpenButton.style.display = 'none';
            }
            legendCloseButton.onclick = function() {
                legend.style.display = 'none';
                legendOpenButton.style.display = 'block';
            }
        }
    }
    

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div id="googft-mapCanvas"></div>
</body>

1 Ответ

0 голосов
/ 25 мая 2018

Вы ищете "боковую панель".FurationTablesLayer не разрешает прямой доступ к данным FusionTable, но вы можете использовать API визуализации для запроса таблицы и отображения информации на боковой панели, а затем перенести эту информацию на карту.

Из моего примера на http://www.geocodezip.com/v3_FusionTables_AfricaMap_kml_sidebar.html

screenshot of map

фрагмент кода: 

google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});

function createSidebar() {
  //set the query using the parameter
  var queryText = encodeURIComponent("https://www.google.com/fusiontables/gvizdata?tq=SELECT * FROM 564705");
  var query = new google.visualization.Query(queryText);
  queryText = encodeURIComponent("SELECT 'description', 'name', 'Citizens', 'Country', 'Latitude', 'Longitude' FROM 564705");
  query = new google.visualization.Query('https://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);

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>";
  fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(1) + "</th>";
  fusiontabledata += "</tr><tr>";

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

function myFTclick(row) {
  var description = FTresponse.getDataTable().getValue(row, 0);
  var name = FTresponse.getDataTable().getValue(row, 1);
  var lat = FTresponse.getDataTable().getValue(row, 4);
  var lng = FTresponse.getDataTable().getValue(row, 5);
  var position = new google.maps.LatLng(lat, lng);
  // Set up and create the infowindow
  if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
  infoWindow.setOptions({
    content: '<div class="FT_infowindow"><h3>' + name +
      '</h3><div>' + description + '</div></div>',
    pixelOffset: new google.maps.Size(0, 2),
    position: position
  });
  infoWindow.open(map);
}

var map = null;
var infoWindow = null;

function initialize() {

  var africa = new google.maps.LatLng(1.56, 16.07);

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: africa,
    zoom: 3,
    mapTypeId: 'hybrid'
  });

  layer = new google.maps.FusionTablesLayer(564705, {
    suppressInfoWindows: true
  });
  layer.setMap(map);

  google.maps.event.addListener(layer, "click", function(event) {
    infoWindow.close();
    infoWindow.setContent(event.infoWindowHtml);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });

  infoWindow = new google.maps.InfoWindow();
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: white;
}

.infowindow * {
  font-size: 90%;
  margin: 0
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<table style="width:100%;height:100%">
  <tr style="width:100%;height:100%">
    <td style="width:100%;height:100%">
      <div id="map_canvas"></div>
    </td>
    <td>
      <div id="sidebar" style="width:260px;height:100%; overflow:auto"></div>
    </td>
  </tr>
</table>
...