Question

因此，我有一个用户完成的表单，并且我尝试使用表单提交地理编码对象，以便google maps 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未成功：错误

Answer 1

JSON.stringify（results）的结果将无法跨API版本移植。＆＃34;内部财产＆＃34; google.maps对象的名称（＆＃34; k＆＃34;，＆＃34; j＆＃34;，＆＃34; Aa＆＃34;，＆＃34; ra＆＃34;等）可以改变新版本的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"]}]"

地理编码器是异步的，地理编码操作的结果不会立即返回，您不想提交表单，直到结果从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;   
}

地理编码API表单提交

1 个答案: