我一直在尝试将Google地图中的地方自动填充功能合并到地址字段中,但我无法对输入进行地理编码。自动完成工作完美无缺,我的问题是,如果用户在哪里输入他们的地址,(或邮政编码,或其他),然后选项卡或点击远离地址字段而不从下拉列表中选择地址,则不会触发place_change事件并且地址永远不会被地理编码和存储。
以下是代码:
var placeSearch,autocomplete;
var latlng = {
'lat': 'lat',
'lng': 'lng'
};
function initialize() {
$(document).ready(function(){
$("#userLocation").blur(function(e){
google.maps.event.clearInstanceListeners(autocomplete);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': document.getElementById('autocomplete') }, function(results) {
// var latlng = results[0].geometry.location;
window.lat = results[0].geometry.location.k;
window.lng = results[0].geometry.location.B
// console.log(latlng);
// console.log(location_type);
console.log(lat);
console.log(lng);
});
});
});
var options = {
types: ['geocode']
};
autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInPlaceLatLng();
});
}
function fillInPlaceLatLng() {
var place = autocomplete.getPlace();
var lat = autocomplete.getPlace().geometry.location.lat();
var lng = autocomplete.getPlace().geometry.location.lng();
console.log(place);
console.log(lat);
console.log(lng);
document.getElementById('lat').value = lat;
document.getElementById('lng').value = lng;
for (var j = 0; j < place.address_components.length; j++) {
var att = place.address_components[j].types[0];
if (latlng[att]) {
var val = place.address_components[j][latlng[att]];
document.getElementById(att).value = val;
}
}
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
});
} else {
var autocompleteResult = document.getElementById('autocomplete').value;
console.log(autocompleteResult);
var geocoder = new google.maps.Geocoder();
}
}
答案 0 :(得分:1)
我可以在运行自动填充代码之前访问Maps API地理编码器来解决此问题。
jQuery("#autocomplete").blur(function(e){
console.log(e);
console.log(this.value);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': this.value }, function(results) {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
document.getElementById('lat').value = lat;
document.getElementById('lng').value = lng;
});
});
这样,如果用户通过自动完成选择一个位置,将返回两组坐标,但最后将返回自动完成(正确的)坐标并将被使用。如果用户标记或单击字段,则仅返回第一个集合。