Передача геокодированного результата на стороне клиента с помощью POST - PullRequest
Новая
       15

Передача геокодированного результата на стороне клиента с помощью POST

0 голосов
/ 22 июня 2011

Я создаю страницу, которая содержит форму с 2 полями ввода текста, search_term и search_location.Это позволяет пользователю сайта искать место рядом с конкретным местоположением.Чтобы избежать превышения лимита API, мне нужно геокодировать clientide введенный пользователем адрес из поля ввода текста search_location в координату LatLng, которая будет передана в $_POST[] функции PHP, которая будет обращаться ксоответствующие записи в базе данных MySQL.

Вот как я думаю, это должно работать:

  1. Пользователь вводит адрес / почтовый индекс в search_location поле ввода текста и ключевое слово в поле ввода текста search_term.
  2. Когда нажата кнопка Submit, обработчик событий JS будет использовать Google Geocoder API для геокодирования результата и возврата координат LatLng.
  3. Координаты LatLng передаются вфункция PHP, которая обращается к ней как к переменной POST и получает доступ к базе данных для получения требуемых результатов.

Вопрос: Я не знаю, как я могу отправитьформа после получения геокодированного результата от Google Geocoder API, чтобы я мог передать LatLng координаты в POST.На данный момент форма передает введенные пользователем значения в поля ввода search_term и search_location.

Ответы [ 2 ]

1 голос
/ 22 июня 2011

В основном вам нужно установить 2 скрытых поля (одно для lat, а другое для lng, если вы не хотите сохранить их как 1 строку), сохранить координаты в нем и затем отправить форму:

вашу форму:

<form id='codeForm' action='some.php'>
<input type='text' name='search_location'>
<input type='text' name='search_term'>
<input type='hidden' name='lat'>
<input type='hidden' name='lng'>
<input type="button" value="Search" onclick="codeAddress()">
</form>

В форме, в которой я использовал тип кнопки, если вы используете кнопку отправки, вам нужно отменить действие отправки, пока Google не вернет ответ или не использует событие onSubmit () для формы.

Ваш геокод JS функция: 

 function codeAddress() {
myForm =  document.forms["codeForm"]
    //get the address
        var address = myForm.elements["search_location"].value;
        geocoder.geocode( { 'address': address}, function(results, status) {
    //geocode was successful      
    if (status == google.maps.GeocoderStatus.OK) {
//grab the lat and long
            lat = results[0].geometry.location.lat
    lng = results[0].geometry.location.lng
   myForm.elements["lat"].value=lat
   myForm.elements["lng"].value=lng
//submit form
     myForm.submit();      
          } else {
//geocode failed
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }
0 голосов
/ 29 марта 2015

Мой слегка измененный код, описанный Майклом выше, который, к сожалению, не работает "из коробки". Мне кажется, важно подчеркнуть это, потому что Google приводит меня к этому сообщению, когда я ищу "скрытые поля геокодирования на стороне клиента". Я беру следующий код прямо с моего сайта, который использует $ _GET, но он работает в любом случае. Начнем с формы: 

<form type="get" id='codeForm' action='index.php'>
<input type='text' name='search_location' id='search_location'>
<input type='text' name='search_term'>
<input type="submit" value="Search" id="submitform">
<input type='text' name='search_term'>
</form>

Как видите, я забрал скрытые поля ввода lat и lng из формы и добавил их с помощью jquery ниже: 

<script type="text/javascript">
function codeAddress() {
    myForm =  document.forms["codeForm"];
    //get the address
    var geocoder = new google.maps.Geocoder();
    var address = document.getElementById('search_location').value;
    geocoder.geocode({'address': address, componentRestrictions:{country:"uk"}}, function(results, status) {
        //geocode was successful      
        if (status == google.maps.GeocoderStatus.OK) {
            //grab the lat and long
            var lat = results[0].geometry.location.lat();
            $("#codeForm").append("<input type='hidden' name='lat' value='" + lat + "' />");
            var lng = results[0].geometry.location.lng();
            $("#codeForm").append("<input type='hidden' name='lng' value='" + lng + "' />");

            //submit form

        } else {
        //geocode failed
        alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

$(document).ready(function() {
    $('#codeForm').submit(function(e) {
        var form = this;
        e.preventDefault();
        codeAddress();
        setTimeout(function () {
            form.submit();
        }, 1000); // in milliseconds
        return false;
    });
});
</script>

Важным моментом в моем коде является то, что я добавил задержку setTimeout, благодаря этому посту на SO. Без задержки я обнаружил, что значения в решении Михала выше не добавляются вовремя.

Как сноска, я знаю, что могу улучшить сочетание javascript и jquery в своем решении, но важно, что это рабочий пример, и каждый может изменить его, если пожелает.

...