Google Maps API V3 et Fusion Tables - Affiche le nom du polygone sélectionné (comme innerHTML) dans la barre latérale

Je cherche à trouver des polygones (stockés dans des tables de fusion) qui se trouvent dans un rayon spécifique et affichent ces polygones sur la carte. Maintenant, j'essaie d'afficher le nom de ces polygones (en utilisant innerHTML) dans la barre latérale, mais je n'ai que récupérer le message "[objet objet]" dans la barre latérale.Google Maps API V3 et Fusion Tables - Affiche le nom du polygone sélectionné (comme innerHTML) dans la barre latérale

J'essaie de faire:

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

code complet est ci-dessous:

<!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>

J'apprécié toute aide.

Best, Darko

Source

2013-05-18 Darko J

couche est un objet FusionTablesLayer. Si vous voulez les données qui sont dans les résultats des opérations de géocodage, c'est dans l'objet "layers", qui est un objet google.maps.GeocoderResult. Si vous voulez que les résultats d'interrogation de la table, qui n'est pas disponible à partir de l'objet FusionTablesLayer, vous devez interroger séparément pour cela, soit en utilisant GViz (la bibliothèque google.visualization) ou l'API FusionTables v1.0. Notez que GViz a une limite sur le nombre de lignes retournées.

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

Source

2013-05-18 14:29:38 geocodezip

Merci encore geocodezip sur l'aide, ce code fonctionne parfaitement. –

Google Maps API V3 et Fusion Tables - Affiche le nom du polygone sélectionné (comme innerHTML) dans la barre latérale

Répondre

Questions connexes