Sar*_* TS 0 javascript php jquery google-maps geo
我正在使用谷歌 API 进行几何定位。目前,当我输入地址自动完成工作并鼠标单击 div 中的纬度和经度时。我的问题是,如果我按 Enter 键而不是单击鼠标,页面将刷新。实际上不要在从自动完成中选择数据并输入时刷新页面。请检查下面的代码并帮助我解决问题。
<html>
<head>
<title>Place Autocomplete With Latitude & Longitude </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
}
</style>
</head>
<body>
<form method="POST" action="#">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Erstellen</button>
</form>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById('pac-input'));
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(' ');
}
/*********************************************************************/
/* var address contain your autocomplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('long').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
Enter 提交您的表单。您需要禁用该键或提交事件(例如,e.preventdefault()在适当的事件处理程序(键事件或提交事件)中使用)。
提交事件最好连接到表单元素和键盘事件相同(或在文档上)。
例如
$('form').submit(function(e){
e.preventDefault();
});
Run Code Online (Sandbox Code Playgroud)
但你可能只需要这个:
$('form').keypress(function(e) {
return e.keyCode != 13;
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4342 次 |
| 最近记录: |