生成緯度/經度從輸入字段之前提交

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()); 
    }  
});