当前位置: 动力学知识库 > 问答 > 编程问答 >

Google Maps, Javascript Variable Scope

问题描述:

My problem with this code is that it won't set the bounds of the map. I assume it is because of scope problems that I'm missing re: the 'marker' and 'markers' variables.

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

My Google Map Appears here:

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

My Data Comes from here:

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

网友答案:

Geocoding is asynchronous, the requests are sent, the loop ends, but data hasn't come back from the server when you call map.fitBounds.

分享给朋友:
您可能感兴趣的文章:
随机阅读: