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

我尋找特定半徑內的多邊形（存儲在Fusion Tables中）並在地圖上顯示這些多邊形。現在我試圖顯示側邊欄內這個多邊形的名稱（通過使用innerHTML），但我只檢索側邊欄內的「[對象對象]」消息。Google Maps API V3和Fusion Tables - 在邊欄內顯示選定的多邊形名稱（作爲innerHTML）

我嘗試這樣做：

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>

我會知道的任何幫助。

最佳，達科

來源

2013-05-18 Darko J

層是FusionTablesLayer會對象。如果您需要位於地理編碼操作結果中的數據，即位於「圖層」對象中的數據，它是一個google.maps.GeocoderResult對象。

如果您想從查詢表中獲得結果，但無法從FusionTablesLayer對象獲得結果，則需要單獨查詢該結果，無論是使用GViz（google.visualization庫）還是FusionTables API v1.0。請注意，GViz對返回的行數有限制。

example with sidebar (using 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; 
}

working example

來源

2013-05-18 14:29:38 geocodezip

感謝上的幫助再次geocodezip，此代碼的工作非常完美。 –

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

回答

相關問題