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

时间:2013-03-12 17:10:36

标签: javascript jquery html5

我正在尝试将输入的值输入字段street addresscitystatezipcode,然后使用这些值填充{的隐藏字段{1}}和longitude

我可以看到我尝试做的一个例子here,我只想尝试使用多个输入字段。

latitude中的{...}适用于CMS表达式引擎,因此可以忽略

表单字段:

value=" "

以下是隐藏的纬度和经度字段:

<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>

1 个答案:

答案 0 :(得分:1)

您可以使用谷歌地理编码器。只需在所有地址字段上绑定onchange,当你有完整的地址时,你可以做一些这样的事情来获取longlat。顺便说一下,地址格式非常宽容谷歌地图接受的任何价值,这里也可以接受。

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

//包含 脚本src =&#34; https://maps.googleapis.com/maps/api/js?sensor = false&#34;&gt;

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