我的当前代码存在一些问题。
我无法从地址文本字段中收到经度和纬度的结果。收到后，我想将经度和纬度放入我的数据库。我不确定这是否可行，因为它检查的值（地址）在表单标签中。
任何输入都会有所帮助......谢谢
function initialize() {
var address = (document.getElementById('address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert("Latitude: " + results[0].geometry.location.lat() + "Longitude: " + results[0].geometry.location.lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<form method="post" action="formconnect.php" ;>
<h2>Add new location</h2>
<p>Please add your company information within this form</p>
Name:
<input type="text" name="name">
<br>Hours:
<input type="text" name="hours">
<br>Baseball:
<select name="baseball">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Basketball:
<select name="basketball">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Hockey:
<select name="hockey">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Golf:
<select name="golf">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Soccer:
<select name="soccer">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Address:
<input type="text" name="address">
<br>
<input type='hidden' value='' name='lat' />
<input type='hidden' value='' name='lng' />
</br>
</br>
<input onClick="codeAddress()" type="submit"></input>
</form>
这里也是formconnect.php
$sql="INSERT INTO markers (name, hours, baseball, basketball, hockey, golf, soccer, address, lat, lng)
VALUES
('$_POST[name]','$_POST[hours]','$_POST[baseball]','$_POST[basketball]','$_POST[hockey]','$_POST[golf]','$_POST[soccer]','$_POST[address]','$_POST[lat]','$_POST[lng]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
echo "one record added";
mysqli_close($con);
答案 0 :(得分：0)
用按钮替换提交类型输入
<button onClick="codeAddress()">submit</button>
为表单命名
<form method="post" action="formconnect.php" name="form1">
提供隐藏的输入ID
<input type='hidden' value='' name='lat' id='lat'>
<input type='hidden' value='' name='lng' id='lng'>
使用您的函数设置隐藏值的值并提交表单
function codeAddress() {
geocoder = new google.maps.Geocoder();
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);
}
});
alert("Latitude: " + results[0].geometry.location.lat() + "Longitude: " + results[0].geometry.location.lng());
document.getElementById("lat").value = lat;
document.getElementById("lng").value = lng;
document.getElementById("form1").submit();
}
答案 1 :(得分：0)
您的代码中有一些微妙的错误
在你的html中，给你想要通过getElementById（）引用的每个字段赋予id，包括表单本身。像这样（因为它们不受影响，我将其他领域遗漏掉），
<form method="post" action="formconnect.php" id="form1">
.
.
.
<input type="text" name="address" id="address" />
<input type='hidden' value='' name='lat' id="lat" />
<input type='hidden' value='' name='lng' id="lng" />
让我们更改提交按钮以标记这与此处的问题无关。就像html5一样，
<button onClick="codeAddress()" type="button" name="upload" >SUBMIT</button>
将按钮类型更改为“按钮”而不是“提交”，确保在您在代码中执行此操作之前不会提交表单。
现在是JS，
<script>
var codeAddress = function () {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode(
{'address': address},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("lat").value = results[0].geometry.location.lat();
document.getElementById("lng").value = results[0].geometry.location.lng();
document.getElementById("form1").submit();
}else{
alert("Geocode was not successful for the following reason: " + status );
}
});
};
</script>
请注意，为纬度和经度字段赋值的代码已经移动到回调中，特别是当结果为“OK”时。表单提交也会移动到那里，以确保只有当谷歌的回复为“确定”时才会提交表单
我想另一个函数'initialize'实现自动完成。我改变了你称之为的地方。我只是立即调用它，就像这样创建，
var initialize = function() {
var address = (document.getElementById('address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) { address = [
(place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}();
注意函数末尾的（）运算符？这就是声明后立即调用的内容。试试这个，让我们看看情况如何。