地理编码API表单提交

Question

所以我有一个表单，用户完成，我试图提交表单的地理编码对象，所以谷歌地图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 was not successful for the following reasons :ERROR

Answer 1

1. 结果的JSON.stringify（结果）不能跨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.maps对象（ “K”， “J”， “AA”， “RA”，等等）可以做与API的新版本改变地理编码器是异步的，地理编码操作的结果不会立即返回，您不希望在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; 
   }