个人中心
gpt4 book ai didi

javascript - 地理编码不适用于 php mysql 提交表单

转载 作者：行者123 更新时间：2023-11-29 07:32:29 25 4
gpt4 key购买 nike

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

问题:此页面上的地理编码无法正常工作。我希望对纬度/经度进行地理编码并与其余信息同时保存到表格中，这样如果他们接下来转到 map 屏幕，则此页面上保存的地址处会有一个更新的标记。目前，纬度和经度字段始终显示 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>

已编辑 2015 年 8 月 21 日

我更新了代码部分以反射(reflect)我在 Google Maps JavaScript API 上找到的内容。最初我在 <head> 中有地理编码脚本但根据谷歌的例子，它进入 body 。我能够使示例代码正常工作:

<!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。您应该通过添加

将两个隐藏输入添加到 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函数中。

关于javascript - 地理编码不适用于 php mysql 提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32133053/

25 4 0
文章推荐： php - 输出帖子评论量
文章推荐： php - 在 MySQL 中保存日期？ (PHP)
文章推荐： php - 获取两个日期之间的年份和月份
文章推荐： mysql - 如何忽略下一个重复行？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com