我正在从我的数据库中打印出许多行。每行包含一个 td，其中 id 是相应的行号（行号从 1 开始）。
随着每一行的回显，我使用 javascript .appendChild() 更新具有地址的行，这些地址的坐标已从数据库中调用。
前 5 行坐标已正确转换为地址，其余行具有从 db 调用的正确坐标（我知道，因为我检查了源）但是在行中输入的地址始终是数据库的最后一行。
请注意，坐标正在使用 google maps api 转换为地址。
if ( mysql_num_rows( $result ) > 0 ){
$i = 1;
while($row = mysql_fetch_array($result)){
echo "<tr>";
?>
<script>
initialize();
var counter = 1;
function initialize() {
var geocoder;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(<?php echo $row['latitude'] ?>,<?php echo $row['longitude'] ?>);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var txt = results[0].formatted_address;
var newtext = document.createTextNode(txt);
document.getElementById("address" + counter).appendChild(newtext);
counter++;
} else {
alert('No results found');
}
} else {
//alert('Geocoder failed due to: ' + status);
}
});
}
setInterval(convert, 2);
function convert() {
initialize();
}
</script>
<?php
echo "<td id='address" . $i . "'></td>";
$i++;
}
解决方案
经过一番思考和大量谷歌搜索，我解决了！下面的完整代码供其他可能偶然发现的人使用！
<?php
// security check
$account_type = $_COOKIE["account_type"];
if($account_type != "canvass_leader" && $account_type != "leader" && $account_type != "canvasser"){
header("location:login.php");
}
$username_cookie2 = $_COOKIE["username_cookie"];
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css"/>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Canvassing Data</title>
<style type="text/css">
#header #welcome #para{
margin-top: -84px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
function setUp() {
window.counter = 1;
setInterval(initialize, 700);
}
function initialize() {
var geocoder;
geocoder = new google.maps.Geocoder();
var lat = document.getElementById("lat" + counter);
var lng = document.getElementById("lng" + counter);
//alert(lat.innerHTML);
//alert(lng.innerHTML);
var latlng = new google.maps.LatLng(lat.innerHTML,lng.innerHTML);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var txt = results[0].formatted_address;
var addressValue = document.createTextNode(txt);
$('#lat' + counter).remove();
$('#lng' + counter).remove();
var element = "#address" + counter;
$(element).append(addressValue)
counter++;
} else {
alert('No results found');
}
} else {
//alert('Geocoder failed due to: ' + status);
}
});
}
</script>
</head>
<body onload="setUp()" >
<div id="wrapper">
<?php
include('header.php');
// connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
// get party cookie
$party = $_COOKIE["party"];
// set table name
$tbl_name = "checklist_" . $party;
?>
<div id='info_bubble'>From this page you can view, search and export all collected canvassing data.</div>
<?php if($account_type == "canvass_leader") { ?>
<div style="text-align: center;">
<form id="" method="post" action="" style="margin: 20px 0 30px 0;">
<h3>Search Canvassing Data</h3>
<fieldset id="inputs" >
<input style="width: 270px;" name="search_name" type="text" placeholder="Search by canvasser name.." >
<input style="width: 270px;" name="search_reception" type="text" placeholder="Search by reception at door.." >
</fieldset>
<fieldset id="actions" class="button button-blue">
<span><input type="submit" id="submit" name="search" value="Search Data"></span>
</fieldset>
</form>
</div>
<?php } ?>
<?php
if(isset($_POST['search'])) {
$search_name = $_POST['search_name'];
$search_reception = $_POST['search_reception'];
if(strlen($search_name)) {
$sql = "SELECT * FROM $tbl_name WHERE canvasser = '$search_name'";
$result = mysql_query($sql);
}
if(strlen($search_reception)) {
$sql = "SELECT * FROM $tbl_name WHERE reception_at_door = '$search_reception'";
$result = mysql_query($sql);
}
}
else{
if($account_type == "canvass_leader") {
$sql = "SELECT * FROM $tbl_name WHERE creator = '$username_cookie2'";
$result = mysql_query($sql);
}
else { // account_type = Leader
$sql = "SELECT * FROM $tbl_name";
$result = mysql_query($sql);
}
}
// display table data
echo "<div id='content'>
<table class='bordered' border='1'>
<tr>
<th>Address</th>
<th>House Number</th>
<th>Registered to Vote</th>
<th>Visited by Candidate</th>
<th>Leafleted</th>
<th>Canvassed</th>
<th>Reception at Door</th>
<th>Canvasser</th>
</tr>";
if ( mysql_num_rows( $result ) > 0 ){
//$num_rows = mysql_num_rows($result);
//echo "$num_rows Rows\n";
$i = 1;
while($row = mysql_fetch_array($result)){
echo "<tr>";
?>
<?php
//echo "<td id='address" . $i . "'></td>";
//echo "<td id='address" . $i . "'>" . $row['latitude'] . " ## " . $row['longitude'] . "</td>";
//echo "<td id='address" . $i . "'>" . $row['latitude'] . " ## " . $row['longitude'] . "</td>";
echo "<td id='address" . $i . "'><p id='lat" . $i . "'>" . $row['latitude'] . "</p><p id='lng" . $i . "'>" . $row['longitude'] . "</p></td>";
// only set co-ordiantes first, then convert them to address by getElementById and appendChild when dom is ready in js in head of page
echo "<td>" . $row['house_number'] . "</td>";
echo "<td>" . $row['registered_to_vote'] . "</td>";
echo "<td>" . $row['visited_by_candidate'] . "</td>";
echo "<td>" . $row['leafleted'] . "</td>";
echo "<td>" . $row['canvassed'] . "</td>";
echo "<td>" . $row['reception_at_door'] . "</td>";
echo "<td>" . $row['canvasser'] . "</td>";
echo "</tr>";
$i++;
}
}
echo "</table>";
if( $account_type == "canvass_leader" || $account_type == "leader"){
echo '<form style="margin-top: 10px;" action="dash_data_canvassing_export.php">';
echo '<fieldset id="actions" class="button button-blue"><span><input type="submit" value="Export Data" id="submit" name="submit"></span></fieldset>';
echo '</form></div>';
}
include('footer.php');
?>
</div>
</body>
</html>