地址解析不适用于php MySQL提交表单

Question

我想发生的事情：用户在表单上输入客户数据（名称，地址等），单击“提交”按钮，并且用户信息已更新为msql数据库表。 还有一个映射页面，该页面调用mysql数据库并更新该映射（不包含在代码中，因为该页面可以正常工作）。

问题：此页面上的Gecode无法正常工作。 我想对经纬度/经纬度进行地理编码，并与其余信息同时保存到表格中，这样，如果他们接下来进入地图屏幕，此页面上保存的地址上将有一个更新的标记。 目前，经度和纬度字段始终显示为0.000000，没有任何错误报告。 我究竟做错了什么？

我的代码（保存为index.php）：

<!DOCTYPE html>

<HTML>
<HEAD>
<TITLE>
</TITLE>

<style>
body {
background-color: #f2f2f2;
}

table {
border-spacing: 0.5rem;
border-collapse: collapse;
}

td {
border: 1px solid #000000;
padding: 0.2rem;
}
::-webkit-input-placeholder {
text-align: center;
}

:-moz-placeholder {
/* Firefox 18- */
text-align: center;

}

::-moz-placeholder {
/* Firefox 19+ */
text-align: center;

}

:-ms-input-placeholder {

text-align: center;

}
.a {
background-color: #ffffff;
box-shadow: 10px 10px 5px #888888;
border-radius: 25px;
border: 1px solid #000000;
padding: 10px;

width: 80%;

}
.b {
background-color: #ffffff;
box-shadow: 10px 10px 5px #888888;
border-radius: 25px;
border: 1px solid #000000;
padding: 10px;

width: 80%;

}
img {
box-shadow: 10px 10px 5px #888888;
border-radius: 25px;
}
.h  {
width: 80%;

margin-left: auto;

margin-right: auto;
height: 10px;
background: url(hr.png) no-repeat center;
border: none;
}

</style>
<link rel="icon" 
type="image/png" 
href="Icon2.png" />
</HEAD>
<BODY>
<center>
<img class"i" src="companyname.png">
<p>
<h2>
Customer Control Panel 
</h2>


<div class="a" id="add_customer">
<form id="customerdata" name="customerdata" method="post" onsubmit="geoCode()">
<input type="text" align="center" id="name" name="name" placeholder="Customer Name">
<input type="text" align="center" id="address" name="address" placeholder="Address">
&nbsp&nbsp&nbsp
<b>
Paid?:
</b>
&nbsp
<select id="type" name="type">
<option value="select">
Make a Selection
</option>
<option value="Yes">
Yes
</option>
<option value="No">
No
</option>
<option value="Not">
Not a customer
</option>
</select>
<input type="text" align="center" id="comments" name="comments" placeholder="Comments. Limited to 150ch">
<input type="hidden" name="lat" id="lat" value="" />
<input type="hidden" name="lng" id="lng" value="" />
<input type="submit" id="submit" name="submit" value="Add Customer">
</form>
</div>

<!-- Start of PHP FORM SUBMITION -->

<?php
if (isset($_POST['submit'])) {
sleep(3);
include 'db.php';
$con = mysql_connect($mysql_host,$mysql_user,$mysql_pass,$mysql_db);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mysql_db", $con);         
$name = $_POST['name'];
$address= $_POST['address'];
$lat= $_POST['lat'];
$lng= $_POST['lng'];
$type= $_POST['type'];
$comments= $_POST['comments'];
$sql= "INSERT INTO `mysql_table`(name,address,lat,lng,type,comments) VALUES ('$name','$address','$lat','$lng','$type','$comments')";
$a=mysql_query($sql);
echo "<br/><br/>";
if (!$a)

die("Error adding record: " . mysql_error());

else

echo "<br>"."1 record added";
}
?>
<!-- End of PHP FORM SUBMITION -->



<!-- Start of Customer viewing Table -->
<br>
<hr class="h">
<p>

<br>
<br>

<div class="b">
<table bgcolor="#FFFFFF">
<tr align="center">
<td>
<b>
Name
</b>
</td>
<td>
<b>
Address
</b>
</td>
<td>
<b>
Paid?
</b>
</td>
<td>
<b>
Comments
</b>
</td>
</tr>
<?php
include 'db.php';
$con = mysql_connect($mysql_host,$mysql_user,$mysql_pass,$mysql_db);

if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("mysql_db", $con);

$query = mysql_query("SELECT `name`, `address`,`lat`,`lng`,`type`,`comments` FROM `my_table` WHERE 1");
while($row = mysql_fetch_array($query, MYSQL_ASSOC))
{

$name = $row['name'];
$address = $row['address'];
$lat = $row['lat'];
$lng = $row['lng'];
$type = $row['type'];
$comments = $row['comments'];
$name = htmlspecialchars($row['name'],ENT_QUOTES);
$comments = htmlspecialchars($row['comments'],ENT_QUOTES);

echo "<tr align='left'><td>$name</td><td>$address</td><td>$type</td><td>$comments</td></tr>";
}
mysql_close($db);
?>
</table>
<!-- End of Customer viewing Table -->

</div>
</center>

<script>
var geocoder = new google.maps.Geocoder();

document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}

function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>

</BODY>
</HTML>

编辑的8/21/15

我更新了代码部分，以反映我在Google Maps JavaScript API中找到的内容 。 最初，我在<head>中包含了地理编码脚本，但是根据google的示例，它位于正文中。 我能够使示例代码正常工作：

<!DOCTYPE html>
<html>
<head>
<title>Geocoding service</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 80%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
}


#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}

#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}

#panel select, .panel select {
width: 100%;
}

#panel i, .panel i {
font-size: 12px;
}

</style>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="">
<input id="submit" type="button" value="Geocode">
</div>
<div id="map"></div>
<div id="lat"></div>
<div id="lng"></div>
<p>


<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 32.2209784, lng: -110.8833395}
});
var geocoder = new google.maps.Geocoder();

document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}

function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
document.getElementById("lat").innerHTML = results[0].geometry.location.lat();
document.getElementById("lng").innerHTML = results[0].geometry.location.lng();
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>

但这是从地图中调用地址，我想从表单中调用地址，只要名称和ID正确，我认为这并不重要，但是我似乎仍然无法使代码正常工作对。 使用示例代码，我能够将lat和lng编写为单独的<div>标签，因此我知道地理编码正在运行。 可能是我的文件另存为.php吗？

Answer 1

INSERT语句的值与字段不匹配。 有4个字段，但您要传递6个值。

请更换

$sql= "INSERT INTO `my_table`(name,address,type,comments) VALUES ('$name','$address','$lat','$lng','$type','$comments')";

至

$sql= "INSERT INTO `my_table`(name,address,type,comments) VALUES ('$name','$address','$type','$comments')";

或者，您必须将坐标的字段添加到字段列表中。

-

看来您没有在geoCode函数中使用变量lat和lng 。 您应该通过添加两个隐藏的输入到HTML表单中

<input type="hidden" name="lat" id="lat" value="" />
<input type="hidden" name="lng" id="lng" value="" />

和使用

document.getElementById('lat').value = results[0].geometry.location.lat();
document.getElementById('lng').value = results[0].geometry.location.lng();

在您的geoCode函数中。