我正在输入地址并使用 Geocomplete 向用户显示可能的地址列表。一旦用户输入完地址,我想获得输入地址的经度和纬度坐标。我在从列表中获取所选地址的坐标时遇到了一些问题。
我已经尝试了jquery blur
,after
和change
,但只要弹出列表就会触发。我正在寻找一种方法来设置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);
});