生成纬度/经度从输入字段之前提交

Question

我想取的值进入领域street address，city，state，并且zipcode，然后使用这些值来填充隐藏字段longitude和latitude。

我很想做的一个例子可以看到here，我只是想用多输入字段来做。

内value=" "的{...}对于CMS expressionengine因此它可以被忽略

表单字段：

<div class="formsection clearfix"> 
    <label for="trainer_address">Street Address</label> 
    <span class="directions">This will NOT be displayed in your listing. Only for search Purposes.</span> 
    <input type="text" name="trainer_address" id="trainer_address" value="{trainer_address}"> 
</div> 

<div class="formsection clearfix"> 
    <label for="trainer_city">City</label> 
    <span class="directions">The city to be displayed in your listing.</span> 
    <input type="text" name="trainer_city" id="trainer_city" value="{trainer_city}"> 
</div> 

<div class="formsection clearfix"> 
    <label for="trainer_state">State</label> 
    <span class="directions">The state to be displayed in your listing.</span> 
    <select name="trainer_state"> 
     {options:trainer_state} 
      <option value="{option_value}"{selected}>{option_name}</option> 
     {/options:trainer_state} 
    </select> 
</div> 

<div class="formsection clearfix"> 
    <label for="trainer_zip">Zip Code</label> 
    <span class="directions">The zip code to be displayed in your listing.</span> 
    <input type="text" name="trainer_zip" id="trainer_zip" value="{trainer_zip}"> 
</div> 

下面是隐藏的纬度和经度字段：

<input type="hidden" id="trainer_longitude" name="trainer_longitude" value="{trainer_longitude}" /> 
<input type="hidden" id="trainer_latitude" name="trainer_latitude" value="{trainer_latitude}" /> 

Answer 1

你可以使用谷歌地理编码器为此。只需将onchange与所有地址字段绑定在一起，当你有完整的地址时，你可以做一些这样的事情来获得longlat。顺便说一句，地址格式是相当宽容谷歌地图接受任何价值，这也是可以接受的。

//参考 https://developers.google.com/maps/documentation/javascript/reference#LatLng

//包含 SCRIPT SRC = “https://maps.googleapis.com/maps/api/js?sensor=false”>

// the method to get the geocode 
var geocoder = new google.maps.Geocoder(); 

function getLatLng (address, callback){ 
    geocoder.geocode({ 'address': address}, function(results, status){ 
     if (status == google.maps.GeocoderStatus.OK) { 
      callback(results[0].geometry.location) 
     } 
     else { 
      callback(false); 
     } 
    }); 
} 

// how to use it 
getLatLng ("1600 Pennsylvania Ave NW, Washington, DC, United States", function(result){ 

    if (result == false){ alert("ADDRESS IS NO GOOD"); } 
    else { 
     alert("Lng: " + result.lng() + " Lat: " +result.lat()); 
    }  
});