如何从融合表中获取数据

时间：2013-08-27 07:55:48

标签： javascript google-maps-api-3 google-fusion-tables

我对此很陌生，我只擅长基本的HTML，其余的是反复试验。

我正在尝试根据地址从我的融合表中提取一个字段并将其显示在名为“侧边栏”的div层中，我会选择“ description “，” name “或” Name “，我可以使用其中任何一个。 ，我很抱歉发布整个页面，但我不知道我哪里出错了。 这是我正在使用的页面的代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Testing</title> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var tableId = '1oGlrsLe3rfQWRT3g7exHtQjxKDwUHH97xDqhTuw'; 
  var geocoder = null; 
  var map = null; 
  var layer = null; 
  var marker = null; 
  var address = '13 ada st, margage, qld 4019, australia'; 
  function codeAddress() { 
var address = document.getElementById('street_add').value; 
address += " "+document.getElementById('city').value; 
address += " "+document.getElementById('state').value; 
address += " "+document.getElementById('postcode').value; 
address += " "+document.getElementById('country').value; 

    geocoder.geocode( { 'address': address}, geocoderCallback );  
  } 


  function initialize() { 
    var myOptions = { 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.addListener(map, 'click', function(e) { 
      geocoder.geocode( { 'location': e.latLng}, geocoderCallback); 
    }); 

    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode( { 'address': address}, geocoderCallback); 
  } 

function displayNeighborhood(address) { 
  for (p = address.length-1; p >= 0; p--) { 
    if (address[p].types.indexOf("neighborhood") != -1) { 
       document.getElementById('neighborhood').innerHTML= address[p].long_name; 
    } 
  } 
} 
function geocoderCallback (results, status) { 
      document.getElementById('neighborhood').innerHTML=""; 

      if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        var lat = results[0].geometry.location.lat(); 
        var lng = results[0].geometry.location.lng(); 

        if (marker) marker.setMap(null); 

        marker = new google.maps.Marker({ 
            map: map,  
            position: results[0].geometry.location 
        }); 
        displayNeighborhood(results[0].address_components); 
        if (!layer)  
        { 
            layer = new google.maps.FusionTablesLayer({ 
              query: { 
                select: 'geometry, name', 
                from: tableId, 
                where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))', 
                limit: 1 
              } 
            }); 
            layer.setMap(map); 
        }  
        else  
        {  
           layer.setOptions({ 
              query: { 
                select: 'geometry, name', 
                from: tableId, 
                where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))', 
                limit: 1 
              } 
            }); 
        } 
      } else { 
        alert("Geocode was not successful for the following reason: " + status); 
      } 
}; 
</script> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function () { 
var str = $('#neighborhood').text(); 
$('#area').val(str); 
}); 
</script> 
<SCRIPT LANGUAGE="JavaScript"> 
function readText (form) { 
    TestVar =document.getElementById('sidebar').innerHTML = fusiontabledata; 
    alert ("You typed: " + TestVar); 
} 

function writeText (form) { 
    form.area.value =document.getElementById('sidebar').innerHTML = fusiontabledata; 
} 
</SCRIPT> 
<script> 
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>"; 
//  for(i = 0; i < numCols; i++) { 
    fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(0) + "</th>"; 
//   } 
  fusiontabledata += "</tr><tr>"; 

  for(i = 0; i < numRows; i++) { 
//    for(j = 0; j < numCols; j++) { 
      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; 

createSidebar("SELECT Name, geometry FROM "+tableid+" WHERE ST_INTERSECTS ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1)"); 
</script> 
</head> 
<body onload="initialize()"> 
  <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
          <td width="20"><form name="a"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td width="18%">Unit / Office:</td> 
    <td width="82%"><label for="aunit"></label> 
      <input type="text" name="aunit" id="aunit" onblur="document.main.Unit .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>Street Number:</td> 
    <td><input name="anumber" type="textbox" class="address" id="street_add" value="532 Beacon St" onblur="document.main.Number .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>Street:</td> 
    <td><input name="astreet" type="textbox" class="address" id="city" value="Boston" onblur="document.main.Street .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>Post Code:</td> 
    <td><input name="apcode" type="textbox" class="address" id="country" value="" onblur="document.main.PostCode .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>Suburb:</td> 
    <td><input name="asuburb" type="textbox" class="address" id="state" value="MA" onblur="document.main.Suburb .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>State</td> 
    <td><label for="state"></label> 
      <select name="astate" class="address" id="postcode" onblur="document.main.State .value = this.value;codeAddress(); " onClick="writeText(this.form"> 
        <option>Select State</option> 
        <option value="Qld">Queensland</option> 
        <option value="ACT">Australian Capital Territory</option> 
        <option value="NSW">New South Wales</option> 
        <option value="NT">Northern Territory</option> 
        <option value="SA">South Australia</option> 
        <option value="Tas">Tasmania</option> 
        <option value="Vic">Victoria</option> 
        <option value="WA">Western Australia</option> 
      </select></td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr> 
</table> 
         <br> 
          </form></td> 
        </tr> 
        <tr> 
          <td>&nbsp;</td> 
        </tr> 
    </table></td> 
    </tr> 
</table> 

<div id="map_canvas" style="height: 250px; width: 250px;"></div> 
<b>Neighborhood:</b> <div class="neighborhood" id="neighborhood"></div> 
<div id="sidebar" style="position:relative; padding: 5px; left:20px; top:300px; width:200px; height:200px; border-style:solid; border-width:1px; border-color:#333333; z-index:3; overflow:auto"> 
      <p class="style1"></p> 
      <p>&nbsp; </p> 
    </div> 
</script><br><form action="" method="post" name="main" id="main"> 
  <input type="button" name="button2" value="Confirm Address" onClick="writeText(this.form)"><P> 
  <label for="Unit2"></label> 
  Hidden fields  <br> 
  area 
<input type="text" name="area" value=""> 
  unit 
  <input type="text" name="Unit" id="Unit"> 
    no 
    <label for="Number"></label> 
    <input type="text" name="Number" id="Number"> 
    street 
    <label for="Street"></label> 
    <input type="text" name="Street" id="Street"> 
    <label for="Suburb"></label> 
    suburb 
    <input type="text" name="Suburb" id="Suburb"> 
    <label for="State"></label> 
    state 
    <input type="text" name="State" id="State"> 
    <label for="PostCode"></label> 
    post 
    <input type="text" name="PostCode" id="PostCode"> 
    <label for="SupportArea"></label> 
  </form> 
<br> 




</body> 
</html>

任何帮助将不胜感激

0 个答案:

没有答案
相关问题
最新问题