Question

我有一个输入字段，用户可以在其中输入地址。我正在使用Place Autocomplete向用户推荐地址。位置是必填字段。

我想要的是确保用户只能输入地点自动填充建议的地址。因此，例如，他们无法以“asagasagaaa”作为位置提交表单。

EJS文件：

<input name="location" type="text" id="location">

JS文件：

$(document).ready(function() {
    ... 
    var autocomplete = new google.maps.places.Autocomplete($('#location')[0]);
    addLocationChangeListener(autocomplete);
   ...
   $("form").submit(function(e){
        doValidations(e, autocomplete);
    });

});

addLocationChangeListener：

// When user changes location, update map coordinates
function addLocationChangeListener(autocomplete) {
    autocomplete.addListener('place_changed', function() {
        console.log("PLACE CHANGED");
        var place = autocomplete.getPlace();
        console.log("PLACE: ", place);
        console.log("---------------------");
        if(place && place.geometry) {
            ... // save stuff
        }
        ...
    }); // End Add Listener
}

我遇到的问题是，似乎$（“＃location）.val（）和autocomplete.getPlace（）不同步 - 即，它们并不总是具有相同的值。

因此，这不起作用

$("#location").on("blur", function() {
      if(autocomplete.getPlace() === undefined) {
          //display error, prevent form submission 
     }
});

例如，假设您输入以下序列：

aaa（无效位置）

不会触发任何地方更改事件。地方未定义，$（“＃location”）是“aaa”。这很好。

19 Fairview ave（假设这是谷歌建议的位置）

$（“＃location”）。val（）是19 Fairview ave。地方是19 Fairview ave。一切都很好。

aaa（无效位置） - 问题出在此处

$（“＃location”）。val（）是aaa。地方是19 Fairview ave。问题！

看到不匹配？关于如何解决这个问题的任何想法？

Answer 1

想出来。我使用了setTimeout，所以它有点像黑客，我不喜欢它。如果您有更好的解决方案，请告诉我。

$(document).ready(function() {
  $("#location").on("blur", function() {
    setTimeout(function() {
        var locVal = $("#location").val(); 
        var place = autocomplete.getPlace();
        if(!place) {
            var errMsg = locVal + " is not a valid location. Please select location from list.";
            displayError($("#location"), errMsg);
        } else if(place.formatted_address === locVal) {
            console.log("MATCH");
        } else {
            var errMsg = locVal + " is not a valid location. Please select location from list.";
            displayError($("#location"), errMsg);
        }
    },200);
  });
}

// When user changes location, update map coordinates
function addLocationChangeListener(autocomplete) {
    autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
        if(place && place.geometry) {
            $("#location").val(place.formatted_address); // THis is key
        }
       ...
    }); // End Add Listener
}

Google Place自动填充功能：仅允许自动填充建议的地址

1 个答案: