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

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 号。地点是锦绣大道 19 号。现在一切都很好。

aaa (invalid location) -- 问题出在这里

$("#location").val() 是 aaa。地点是锦绣大道 19 号。问题！

看到不匹配了吗？有关如何解决此问题的任何想法？

Answer 1

想通了。我使用了 setTimeout，所以这是一种 hack，我不喜欢它。如果您有更好的解决方案，请告诉我。

$(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
}