Question

我对此代码的问题是它不会设置地图的边界。我认为这是因为我缺少的范围问题：'标记'和'标记'变量。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script><script type="text/javascript">

/** begin variables **/
var geocoder = new google.maps.Geocoder(); // create the geocoder object, this will turn the addresses into latlngs
var latlng = new google.maps.LatLng(43.1833, 79.2333); // create an latlng object to represent the center
var mapOptions = { zoom: 8, center: latlng };
var map = new google.maps.Map($(".map-display-scripts").get(0), mapOptions); // create a map at html dom with class of 'map-display-scripts'
var returnTable = $("table.return").get(0); // get the html dom element of the table where the results will be displayed
var rowCount =  $("table.return").children('tbody').children('tr').length; // count the number of rows in the table
var marker;
var markers = new Array(); // an empty array of markers
var infowindowobj = new google.maps.InfoWindow({ maxWidth: 160 }); // an empty info window object that will be iteratively attached to each marker
var bounds = new google.maps.LatLngBounds(); //  Create a new viewpoint bound
/** end variables **/

/* parse the table
   outer loop will loop by number of rows in table
   start at 1 to avoid the header row which is row 0 */
for (var i = 1; i < rowCount; i += 1) {

  var row = returnTable.rows[i]; // get current row from table
  var propertyRSN = $(row).find(".propertyrsn").html(); // get the property rsn for the current row

  // will geocode, place marker and create infowindow for table rows with numeric propertyrsn values.
  if (isNumber(propertyRSN) && (propertyRSN != 0)) {

    var address = $(row).find(".addressPoint").html(); // get the address from the row
    var infowindow = $(row).find(".info-window").html(); // get the infowindow content from the row

    /***** call the geocoder to geocode the civic address */
    geocoder.geocode( 
        {"address": address}, 
        function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            marker = new google.maps.Marker({map: map, position: results[0].geometry.location});
            /***** add a listener for each marker for infowindow **/
            google.maps.event.addListener(marker, "click", (function(marker, i) {
              return function() {
                infowindowobj.setContent(infowindow);
                infowindowobj.open(map, marker);
              }
            })(marker, i));
            /***** end addListener ********************************/
          } else {
            console.log("Row: " + i + ". Geocode was not successful for the following reason: " + status);
          } //end if
        } // end funciton
     ); 
    /***** end geocoder call **********************************/

    markers.push(marker); // add newly created marker to array of markers
    bounds.extend(marker.position);
    console.log("markers.length:" + markers.length);
  } // end if (isNumber(propertyRSN) && (propertyRSN != 0))
}
/** end for loop **/
map.fitBounds(bounds);

/** Helper functions **/
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}
/** End Helper functions **/
</script>

我的Google地图显示在此处：

<div class="group " style=""> 
<h2 style=""> 
<label for="d_1385663482475" title=""> 
<span> Map </span> 
</label> 
</h2> 
<div class="map-display-scripts" style="width: 680px; height: 680px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; "></div>
</div>

我的数据来自这里：

<div class="repeat return">
<h2><label for="d_1385663482079" title=""><span>return</span></label></h2>

<table cellpadding="2" cellspacing="1" border="0" width="100%" class="return c3">
<thead>
<tr class="c1">
<th><span><label for="d_1385663482115[1]" title=""><span>propertyRSN</span></label></span></th>
<th><span><label for="d_1385663482203[1]" title=""><span>Address</span></label></span></th>
<th><span><label for="d_1385663482392[1]" title=""><span>info-window</span></label></span></th>
</tr>
</thead>
<tbody>
<tr class="c2">
<td><span class="staticText propertyrsn">5459</span></td>
<td><span class="staticText addressPoint">5453 Harrison ST , Portland, OR</span></td>
<td><span class="staticText info-window">12 100032 000 00 RES<br>
Status: Issued</span>
<hr>
<span class="staticText info-window">Permit<br>
Residential Building<br>
Single Family<br>
New Construction</span>
<hr>
<span class="staticText info-window">In Date: 2012-04-23T15:17:25.000Z<br>
Date Issued: 2012-04-23T15:33:47.000Z</span>
<hr>
<span class="staticText info-window">Residential Building</span></td>
</tr>
<tr class="c2">
<td><span class="staticText propertyrsn">5460</span></td>
<td><span class="staticText addressPoint">631 Harrison ST , Portland, OR</span></td>
<td><span class="staticText info-window">12 100033 000 00 RES<br>
Status: New</span>
<hr>
<span class="staticText info-window">Permit<br>
Residential Building<br>
Townhouse<br>
Alteration/Repair</span>
<hr>
<span class="staticText info-window">In Date: 2012-04-23T19:38:25.000Z<br>
Date Issued:</span>
<hr>
<span class="staticText info-window">Residential Building</span></td>
</tr>
<tr class="c2">
<td><span class="staticText propertyrsn">5460</span></td>
<td><span class="staticText addressPoint">631 Harrison ST , Portland, OR</span></td>
<td><span class="staticText info-window">12 100034 000 00 RES<br>
Status: Issued</span>
<hr>
<span class="staticText info-window">Permit<br>
Residential Building<br>
Single Family<br>
New Construction</span>
<hr>
<span class="staticText info-window">In Date: 2012-04-24T17:30:45.000Z<br>
Date Issued: 2012-04-24T17:46:16.000Z</span>
<hr>
<span class="staticText info-window">Residential Building</span></td>
</tr>
<tr class="c2">
<td><span class="staticText propertyrsn">5459</span></td>
<td><span class="staticText addressPoint">5453 Harrison ST , Portland, OR</span></td>
<td><span class="staticText info-window">12 100035 000 00 RES<br>
Status: 0</span>
<hr>
<span class="staticText info-window">Permit<br>
Residential Building<br>
Single Family<br>
New Construction</span>
<hr>
<span class="staticText info-window">In Date: 2012-05-10T03:35:54.000Z<br>
Date Issued: 2012-05-16T17:16:08.000Z</span>
<hr>
<span class="staticText info-window">Residential Building</span></td>
</tr>
<tr class="c2">
<td><span class="staticText propertyrsn">5459</span></td>
<td><span class="staticText addressPoint">5453 Harrison ST , Portland, OR</span></td>
<td><span class="staticText info-window">12 100036 000 00 RES<br>
Status: Internet Wait</span>
<hr>
<span class="staticText info-window">Permit<br>
Residential Building<br>
Dwelling Unit<br>
Alteration/Repair</span>
<hr>
<span class="staticText info-window">In Date: 2012-05-10T23:08:21.000Z<br>
Date Issued:</span>
<hr>
<span class="staticText info-window">Residential Building</span></td>
</tr>
</tbody>
</table>
</div>

Answer 1

地理编码是异步的，请求被发送，循环结束，但是当您调用map.fitBounds时，数据还没有从服务器返回。

谷歌地图，Javascript可变范围

1 个答案: