提交地理编码API表单

Geocoding API form submit

本文关键字：API 表单 编码 提交      更新时间：2023-09-26

所以我有一个表单，用户完成，我试图提交与表单的地理编码对象，所以谷歌地图API可以绘制它。

HTML: 

<form name="add" onsubmit="submits()" action="index.php" method="post">
    Resource Name: <textarea name="name" type="text"></textarea><br><br>
    Resource Type: <textarea name="type" type="text"  ></textarea><br><br>
    Street Number: <input type="number" id = "streetnum" name="streetnum"><br> 
    Street Name: <input type="text" id="streetnam" name="streetnam"><br> 
    City: <input type="text" id="city" name="city"> 
    State: <input type="text" id="state" name= "state"> <br><br>
    Resource Start Date: <input type="date" name="start" id="start"/> <br>
    Resource End Date: <input type="date" name="end" id="end">
    <input type="text" name="addressobject" id="addressobject" style="display:none" >
    <input type= "checkbox" name="annual" id= "annual" value="annual">Annual<br><br>
    <div id="new">
    </div>
    Details: <textarea name="details" rows=5  type="text" ></textarea>
    <input name="submit" type="submit" value="Create Event"/>
    <button type="button" onclick="addNew()">Add more date fields</button>
    <button type="button" onclick="deleteAtt()">Delete a date field</button>
</form>

Javscript: 

<script>
function submits(){
    var address= document.getElementById("streetnum").value + " " + document.getElementById("streetnam").value+ ", " + document.getElementById("city").value+", " + document.getElementById("state").value;
    var JSONobject;
    var geocoder = new google.maps.Geocoder();
    if(geocoder){
        geocoder.geocode({'address':address}, function(results,status){
            if(status==google.maps.GeocoderStatus.OK){
                if(status!=google.maps.GeocoderStatus.ZERO_RESULTS){
                    JSONobject = window.JSON.stringify(results);
                    document.getElementById("addressobject").value = JSONobject;
                }else{
                    alert("No results found");
                }
            }else{
                alert("Geocode was not successful for the following reason: " +status);
            }
        });
    }   
}
</script>

出于某种原因，当我从控制台调用submits()时，它工作，但当我实际使用按钮时，我得到错误:

GEOCODE不成功，原因如下:

  1. JSON.stringify(results)的结果将不能在不同版本的API之间移植。google的"内部属性"名称("k"，"j"，"Aa"，"ra"等)。map对象可以并且确实会随着API的新版本而改变:

    "[{"address_components":[{"long_name":"532","short_name":"532","types":["street_number"]},{"long_name":"Beacon Street","short_name":"Beacon St","types":["route"]},{"long_name":"Back Bay West","short_name":"Back Bay West","types":["neighborhood","political"]},{"long_name":"Boston","short_name":"Boston","types":["locality","political"]},{"long_name":"Suffolk County","short_name":"Suffolk County","types":["administrative_area_level_2","political"]},{"long_name":"Massachusetts","short_name":"MA","types":["administrative_area_level_1","political"]},{"long_name":"United States","short_name":"US","types":["country","political"]},{"long_name":"02215","short_name":"02215","types":["postal_code"]}],"formatted_address":"532 Beacon Street, Boston, MA 02215, USA","geometry":{"location":{"k":42.3505906,"A":-71.0911074},"location_type":"ROOFTOP","viewport":{"Aa":{"k":42.3492416197085,"j":42.3519395802915},"ra":{"j":-71.09245638029154,"k":-71.08975841970846}}},"partial_match":true,"types":["street_address"]}]"

  2. 地理编码器是异步的，地理编码操作的结果不会立即返回，您不想在结果从Google服务器返回之前提交表单(在回调例程中)。像这样:

    function submits(){
  var address= document.getElementById("streetnum").value + " " + document.getElementById("streetnam").value+ ", " + document.getElementById("city").value+", " + document.getElementById("state").value;
  var JSONobject;
  var geocoder = new google.maps.Geocoder();
  if(geocoder){
     geocoder.geocode({'address':address}, function(results,status){
       if(status==google.maps.GeocoderStatus.OK){
         if(status!=google.maps.GeocoderStatus.ZERO_RESULTS){
           JSONobject = window.JSON.stringify(results);
           document.getElementById("addressobject").value = JSONobject;
           // submit the form now that all the data is available.
           document.getElementById("add").submit();
         }else{
           alert("No results found");
         }
       }else{
        alert("Geocode was not successful for the following reason: " +status);
       }
     });
  }
  return false;   
}
相关文章：