如果用户没有选择地点,如何对自动填充输入进行地理编码

时间:2014-07-21 17:08:16

标签: google-maps-api-3 google-places

我一直在尝试将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();

  }
}

1 个答案:

答案 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;
    });
});

这样,如果用户通过自动完成选择一个位置,将返回两组坐标,但最后将返回自动完成(正确的)坐标并将被使用。如果用户标记或单击字段,则仅返回第一个集合。