Google地图自动填充功能从列表中获取所选值

时间:2013-03-25 17:49:57

标签: jquery google-maps geolocation geocoding

我正在输入地址并使用 Geocomplete 向用户显示可能的地址列表。一旦用户输入完地址,我想获得输入地址的经度和纬度坐标。我在从列表中获取所选地址的坐标时遇到了一些问题。

我已经尝试了jquery blurafterchange,但只要弹出列表就会触发。我正在寻找一种方法来设置loopUpAdd中列表中的选定地址,一旦选择了地址或自动完成,我希望能够获得地址的经度和纬度坐标。 $('#loopUpAdd').blur(function(evt){....中的提醒显示的是用户输入的内容的值,而不是选中的内容。 这是我的小提琴GeoCode

HTML

<label>Address</label>
<input type="text" id="loopUpAdd" />
<label>Long</label>
<input type="text" id="long" />
<label>Lat</label>
<input type="text" id="lat" />

JQuery

function getLocation() {

    var input = document.getElementById('loopUpAdd');

    var options = {
        types: ['(cities)'],
            componentRestrictions: {country: 'tt'}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options); 
        $('#lat').val(0);
        $('#long').val(0);
    }

function codeAddress(address) {
    //var address = document.getElementById("loopUpAdd").value;
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {           
            var lng = results[0].geometry.location.lng();
            var lat = results[0].geometry.location.lat();

            $('#lat').val(lat);
            $('#long').val(lng);
            alert(lng +'-'+lat);
        } else {
            $('#lat').val(0);
            $('#long').val(0);
        }
    });
}

$(document).ready(function () {

    $('#loopUpAdd').blur(function(evt){ 
        alert($(this).val());
        codeAddress($(this).val());          
    });

    $('#loopUpAdd').mouseenter(function(evt){  
        $('#lat').val(0);
        $('#long').val(0);     
    });

    google.maps.event.addDomListener(window, 'load', getLocation);
}); 

0 个答案:

没有答案