地理编码不工作在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">
   
<b>
Paid?:
</b>
 
<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
函数中使用变量lat
和lng
。您应该通过添加
<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
函数中
相关文章:
- 将phonegap图像发布到php/mysql-图像字段从发布请求中消失
- 如何使用jQueryPOST将get变量从JavaScript传递到PHP-Mysql
- 如何使用PHP+MySQL Ajax自动完成jQuery并传递给JavaScript
- 为什么PHP MySQL INSERT通过AJAX调用只是偶尔发生
- 将动态feild数据存储到jquery-mobile和php-mysql中的数据库中
- PHP MySQL 在一个页面和一个查询中插入具有多行的数据
- 多行 PHP MySQL 插入
- 我怎样才能为一个简短的项目托管 HTML/PHP/MySQL
- 如何处理json编码的php-mysql数组
- 根据php/mysql变量中的文本行调整文本区域的大小
- 我们可以用grunt设置一个php/mysql环境吗
- php/mysql搜索结果-当类型>1,同时保持其他类型不>1-代码点火器
- PHP/MySQL:将用户输入保存到数据库
- 使用PHP/MYSQL在phonegap中注册;不起作用
- PHP MySQL值传递到JavaScript
- 使用Javascript将变量传递到php-MySQL脚本
- 如何检查PHP/MYSQL中是否已经存在USERNAME
- 呈现Highcharts的问题-通过PHP/MySQL填充
- 如何在不输出结束PHP标签“?>”的情况下将PHP MySQL查询回显到Javascript变量中
- 通过使用onblur启动Ajax查询到PHP MySQL DB