以下是该页面的代码，我正在使用：
<!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>Google Maps JavaScript API v3 Example: Geocoding Simple</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 = '509 E 47th St, Chicago, IL 60653';
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',
from: tableId,
where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))',
limit: 1
}
});
layer.setMap(map);
}
else
{
layer.setOptions({
query: {
select: 'geometry',
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>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</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();">
<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> </td>
<td> </td>
</tr>
</table>
<br>
</form></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<div id="map_canvas" style="height: 250px; width: 250px;"></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">Radius polygons</p>
<p> </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>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</body>
</html>