使用Google Maps JavaScript API自动完成地址

我遇到了一个挑战，我需要你的帮助。我正在开发表单输入，其中一个字段是地址/位置。我想利用GoogleMapsAPI，提供自动完成和地址地理编码等服务。我有HTML和JS文件。我的主要问题是，我想点击用户可能键入的无效地址，并提醒他们这是一个错误。比如，如果有人键入了一个未被建议的地址，或者键入了一个不完整的地址，我应该能够告诉他们这不是一个有效的地址。这是有效的，但只有当我按enter键而不是submit时才有效。如果我按submit，它会提交表单而不会通知

//此示例需要Places库。包括图书馆=地方
//第一次加载API时的参数。例如：
// 
函数initMap（）{
常量输入=document.getElementById（“位置输入”）；
const autocomplete=新的google.maps.places.autocomplete（输入）；
autocomplete.addListener（“place\u changed”，（）=>{
const place=autocomplete.getPlace（）；
如果（！place.geometry）{
//用户输入了未建议的地点的名称，然后
//按Enter键，或Place Details请求失败。
//window.alert（“没有可供输入的详细信息：“+place.name+””）；
swal（“请填写所有*必填字段”，“单击确定继续”，“警告”）；
返回；
}
});
}

文件

您需要首先阻止表单提交，并检查

place.geometry

在

place\u事件中检查表单的方式。显示这个漂亮的
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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&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;
    } 
  });
}

//此示例需要Places库。包括图书馆=地方
//第一次加载API时的参数。例如：
// 
函数initMap（）{
常量输入=document.getElementById（“位置输入”）；
const autocomplete=新的google.maps.places.autocomplete（输入）；
autocomplete.addListener（“place\u changed”，（）=>{
const place=autocomplete.getPlace（）；
如果（！place.geometry）{
//用户输入了未建议的地点的名称，然后
//按Enter键，或Place Details请求失败。
//window.alert（“没有可供输入的详细信息：“+place.name+””）；
swal（“请填写所有*必填字段”，“单击确定继续”，“警告”）；
返回；
}
});
//提交前检查
document.getElementById（'mform'）。addEventListener（'submit'，函数（e）{
e、 preventDefault（）；//防止表单提交
const place=autocomplete.getPlace（）；//从autocomplete获取位置
如果（！place.geometry）{//检查位置是否有效
swal（“请填写所有*必填字段”，“单击确定继续”，“警告”）；
返回；
} 
});
}
您需要首先阻止表单提交，并检查
place.geometry
在
place\u事件中检查表单的方式。显示这个漂亮的
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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&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;
    } 
  });
}

//此示例需要Places库。包括图书馆=地方
//第一次加载API时的参数。例如：
// 
函数initMap（）{
常量输入=document.getElementById（“位置输入”）；
const autocomplete=新的google.maps.places.autocomplete（输入）；
autocomplete.addListener（“place\u changed”，（）=>{
const place=autocomplete.getPlace（）；
如果（！place.geometry）{
//用户输入了未建议的地点的名称，然后
//按Enter键，或Place Details请求失败。
//window.alert（“没有可供输入的详细信息：“+place.name+””）；
swal（“请填写所有*必填字段”，“单击确定继续”，“警告”）；
返回；
}
});
//提交前检查
document.getElementById（'mform'）。addEventListener（'submit'，函数（e）{
e、 preventDefault（）；//防止表单提交
const place=autocomplete.getPlace（）；//从autocomplete获取位置
如果（！place.geometry）{//检查位置是否有效
swal（“请填写所有*必填字段”，“单击确定继续”，“警告”）；
返回；
} 
});
}
在提交表单之前，您需要进行某种验证。例如，禁用“提交”按钮，直到您拥有有效的地址（
place.geometry
），如果地址再次更改为不“存在”（如API中所示）的内容，请再次禁用该按钮。你有不同的方法。这取决于它的安全程度。谢谢你的回复。按Enter键返回警报，但submit按钮soesn.t会提交地址，无论地址是否有效。是否有一种方法，我可以说，如果（place.geometry）是有效的，提交表格，否则返回错误。我已经尝试了很多可能的方法，但仍然没有成功。在提交表格之前，你需要一些验证。例如，禁用“提交”按钮，直到您拥有有效的地址（
place.geometry
），如果地址再次更改为不“存在”（如API中所示）的内容，请再次禁用该按钮。你有不同的方法。这取决于它的安全程度。谢谢你的回复。按Enter键返回警报，但submit按钮soesn.t会提交地址，无论地址是否有效。是否有一种方法，我可以说，如果（place.geometry）是有效的，提交表格，否则返回错误。我已经试过很多次了