Google Maps API V3和Fusion Tables-在側邊欄中顯示選定的多邊形名稱（作為innerHTML）

Question

我想找到位於特定半徑內的多邊形（存儲在Fusion Tables中）並將其顯示在地圖上。 現在，我試圖在側邊欄中顯示此多邊形的名稱（通過使用innerHTML），但是我只在側邊欄中檢索了“ [object Object]”消息。

我嘗試做：

document.getElementById('layer').innerHTML = layer;

整個代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <title>USA</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;

function initialize() {

  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(37.857507,-101.000978);

  var mapOptions = {
    zoom: 4,
    center: latlng,
    mapTypeId: 'roadmap'
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

//Reverse Geocode
function codeLatLng() {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var lat = parseFloat(latlngStr[0]);
  var lng = parseFloat(latlngStr[1]);
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(layers, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (layers[1]) {
        map.setZoom(10);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        infowindow.setContent(layers[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        alert('No layers found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
//Reverse Geocode

        var tableid = '15Dce-frPm_D_5gTTG2gKwlWTElkgL7NC1RqDzuY';

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'geometry, name',
            from: tableid,
            where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG ' + latlng + ', 1))'
          },
        });

        document.getElementById('layer').innerHTML = layer;
        layer.setMap(map);

        // Create a map circle object to visually show the radius.
        var circle = new google.maps.Circle({
          center: latlng,
          radius: 1,
          map: map,
          fillOpacity: 0.2,
          strokeOpacity: 0.5,
          strokeWeight: 1
        });

        // Update the radius when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('radius'),
            'change', function() {
              var meters = parseInt(this.value, 10);
              layer.setOptions({
                query: {
                  select: 'geometry, name',
                  from: tableid,
                  where: 'ST_INTERSECTS(geometry, ' +
                      'CIRCLE(LATLNG ' + latlng + ', ' + meters + '))'
                }
              });

              circle.setRadius(meters);
            });
    }

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

  </script>

<style>
      #panel {
        position: absolute;
        top: 20px;
        left: 20px;

        width: 300px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #333333;
      }
      #latlng {
        width: 150px;
      }
    .style1 {
    font-size: 14px;
    font-weight: bold;
}
</style>

  </head>
  <body>

      <div id="panel">
      <input id="latlng" type="text" value="40.714224,-73.961452">
      <input type="button" value="Reverse Geocode" onclick="codeLatLng()">
    </div>


    <div id="map-canvas" style="position:absolute; left:350px; top:20px; width:900px; height:700px; z-index:1; "></div>
    <div id="panel2" style="position:absolute; padding: 5px; left:20px; top:60px; width:200px; height:200px; border-style:solid; border-width:1px; border-color:#333333; z-index:3; ">
      <p class="style1">Select radius:</p>

        <select name="select" id="radius">
          <option value="1">0 meters</option>
          <option value="5000">5000 meters</option>
          <option value="10000">10,000 meters</option>
          <option value="15000">15,000 meters</option>
          <option value="20000">20,000 meters</option>
          <option value="25000">25,000 meters</option>
        </select>   
      </p>
    </div>
    <div id="layer" style="position:absolute; padding: 5px; left:20px; top:300px; width:200px; height:200px; border-style:solid; border-width:1px; border-color:#333333; z-index:3; ">
      <p class="style1">Radius polygons</p>
      <p>&nbsp; </p>
    </div>

  </body>
</html>

我將不勝感激。

最好，達科

Answer 1

層是FusionTablesLayer對象。 如果您要使用地理編碼操作結果中的數據，則該數據位於“ layers”對象中，該對象是google.maps.GeocoderResult對象。

如果您希望通過查詢表獲得結果（FusionTablesLayer對象無法提供），則需要使用GViz（google.visualization庫）或FusionTables API v1.0分別進行查詢。 請注意，GViz對返回的行數有限制。

邊欄示例（使用GViz）

function  createSidebar(query) {
  // https://www.google.com/fusiontables/api/query?sql=SELECT%20ROWID,%20%2A%20FROM%20564705

  //set the query using the parameter
  var queryText = encodeURIComponent(query);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

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

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(0) + "</th>";
  fusiontabledata += "</tr><tr>";

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

工作實例

Google Maps API V3和Fusion Tables-在側邊欄中顯示選定的多邊形名稱（作為innerHTML）

問題描述

1 個解決方案

解決方案1
0 已采納 2013-05-18 14:29:38

Google Maps API V3和Fusion Tables-在側邊欄中顯示選定的多邊形名稱（作為innerHTML）

問題描述

1 個解決方案

解決方案1 0 已采納 2013-05-18 14:29:38

解決方案1
0 已采納 2013-05-18 14:29:38