Div Layer显示在地图上,但不显示相应的NAME

时间:2013-08-20 07:32:37

标签: javascript google-maps google-fusion-tables

我不敢相信我又回到了这里,我以为我把这个页面全部排序了。

我已经使用了Geocodezip的页面(http://www.geocodezip.com/v3_FusionTables_geocoder_PointInPolygonChicago.html)并对其进行了修改(我以为我已经完成了所有这些)。

我正在尝试使用我的桌子而不是原来的芝加哥社区,但是我找不到我错过的东西让它从我的桌子返回'NAME'列,就像原来那样

我已经查看了原始页面中的融合表,以确保我的表格具有相同的列标题,因为我认为这是用过的。 地图显示我的几何图层但未返回相应的“ NAME ” 我在代码中找不到任何需要更改的内容 我现在有一个非常小的桌子,一旦我开始工作,我将能够使它完全正常运行。


我的表:https://www.google.com/fusiontables/DataSource?docid=1oGlrsLe3rfQWRT3g7exHtQjxKDwUHH97xDqhTuw

这是我的代码:

<!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 =$('#neighborhood').text();
alert ("You typed: " + TestVar);
}

function writeText (form) {
form.area.value =$('#neighborhood').text();
}
</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>&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>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</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 个答案:

没有答案