地理编码不工作在php mysql提交表单


Geocoding not working on php mysql submission form

我想要发生的事情:用户在表单上输入客户数据(姓名,地址等),点击提交按钮,用户信息更新到msql数据库表。还有一个map页面调用mysql数据库并更新map(没有包含在代码中,因为该页面工作正常)。

问题: Gecode在本页不起作用。我想有lat/lng地理编码,并保存到表在同一时间作为其余的信息,这样,如果他们去地图屏幕下一步,将有一个更新的标记保存在这个页面上的地址。就目前而言,lat和lng字段总是显示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>的地理代码脚本,但根据谷歌的例子,它在身体。我能够让示例代码工作:

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

但是它是从map中调用地址,我想从表单中调用地址,我认为只要名称和id是正确的,这并不重要但我仍然不能让我的代码正常工作。使用示例代码,我能够编写lat和lng来分离<div>标签,因此我知道地理代码正在工作。可能是我的文件保存为。php吗?

您的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函数中使用变量latlng。您应该通过添加

向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函数中