#javascript #html #jquery #google-maps
#javascript #HTML #jquery #google-карты
Вопрос:
Я столкнулся с проблемой, и мне любезно понадобилась ваша помощь. Я разрабатывал ввод формы, одним из полей которого был адрес / местоположение. Я хотел использовать API Карт Google с такими сервисами, как автозаполнение и геокодирование адресов. У меня есть файлы HTML и JS. Моя основная проблема заключается в том, что я хотел указать недопустимые адреса, которые могут вводить пользователи, и предупредить их, что это ошибка. Например, если кто-то вводит адрес, который не был предложен, или вводит неполный адрес, я должен быть в состоянии сообщить им, что это недопустимый адрес. Это работает, но только когда я нажимаю enter, а не отправляю. Если я нажимаю «Отправить», он отправляет форму и не уведомляет.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;libraries=places">
function initMap() {
const input = document.getElementById("location-input");
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
//window.alert("No details available for input: '" place.name "'");
swal("Please fill all the *Required fields","Click okay to continue", "warning");
return;
}
});
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="form.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Libre Franklinamp;display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMapamp;libraries=placesamp;v=weekly" defer></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<title>Document</title>
</head>
<body>
<form action="" id="mform">
<div class="container">
<div class="row">
<!--Address Section-->
<div id="pac-container">
<input id="location-input" type="text" placeholder="Enter a location" />
</div>
<!--End of Address Section-->
<!--Form Submit Section-->
<div class="row fill-form">
<input name="submit" type="submit" id="submit" class="submit" value="Submit">
</div>
<!--End of Form Submit Section-->
</div>
</div>
<script src="places.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</form>
</body>
</html> Я попытался добавить прослушиватель событий отправки, но я не могу получить то, что ожидаю
Комментарии:
1. Ну, вам понадобится какая-то проверка перед отправкой формы. Например, отключите кнопку отправки, пока у вас не будет действительного адреса (
place.geometry), отключите ее снова, если адрес снова будет изменен на что-то, что не «существует» (существует, как в API). У вас разные подходы. Это зависит от того, насколько «безопасным» он должен быть.2. Спасибо за ваш ответ. Нажатие клавиши Enter возвращает оповещение, но кнопка отправки не работает, она отправляет адрес, действительный он или нет. Есть ли способ, которым я могу сказать, является ли (place.geometry) допустимым, отправьте форму, иначе верните ошибку. Я перепробовал много возможных способов обойти это, но все равно безуспешно.
Ответ №1:
Сначала вам нужно запретить отправку формы и проверить place.geometry , как вы проверяете ее на place_changed событии. Покажите это приятное swal сообщение, а затем делайте все, что хотите, если оно действительно.
Ниже приведены ваши собственные коды, отредактированные и проверенные перед отправкой.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;libraries=places">
function initMap() {
const input = document.getElementById("location-input");
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
//window.alert("No details available for input: '" place.name "'");
swal("Please fill all the *Required fields","Click okay to continue", "warning");
return;
}
});
//Check before submit
document.getElementById('mform').addEventListener('submit', function(e){
e.preventDefault(); //prevent form submit
const place = autocomplete.getPlace(); //get place from autocomplete
if (!place.geometry) { //check if valid location
swal("Please fill all the *Required fields","Click okay to continue", "warning");
return;
}
});
}
Комментарии:
1. Наконец-то это работает! Спасибо, Ремон, Приятно провел время, приятель!
2. Самый желанный гость @Steel8. Я допустил глупую ошибку, просто проверьте это
if (!place || !place.geometry)вместоif (!place.geometry)этого, иначе это приведет к ошибке в первый раз.3. Но консоль вообще не показывала никаких ошибок, позвольте мне это изменить
4. Оооо и еще одна вещь, могу ли я вызывать более одной функции при прослушивании события? Поскольку один и тот же ввод должен быть геокодирован и сохранен в базе данных в виде координат, и у меня есть другая функция для геокодирования, теперь, когда я отправляю, он не отображает предупреждение, если я ввожу адрес, не найденный на панели предложений Google Maps
5. Это приведет к 2 вызовам API вместо 1. Не очень эффективно.