Question

目标：尝试对用户输入的地址进行地理编码，然后获取信息，将其放入表单并将此信息输入数据库。

到目前为止的道路：我使用以下代码成功地完成了这项任务：

$(function() {
    $("#address").autocomplete({
        //This bit uses the geocoder to fetch address values
        source : function(request, response) {
            geocoder.geocode({
                'address' : request.term
            }, function(results, status) {
                response($.map(results, function(item) {
                    return {
                        label : item.formatted_address,
                        value : item.formatted_address,
                        latitude : item.geometry.location.lat(),
                        longitude : item.geometry.location.lng(),
                        streetNo : item.address_components[0].long_name,
                        streetName : item.address_components[1].long_name,
                        town : item.address_components[2].long_name,
                        province : item.address_components[4].long_name,
                        postal : item.address_components[6].long_name,
                        country : item.address_components[5].long_name
                    }

                }));
            })
        },
        //This bit is executed upon selection of an address
        select : function(event, ui) {

            //Now that an address has been selected, show the address form
            $("#newReview").show('fast');
            $("#latitude").val(ui.item.latitude);
            $("#longitude").val(ui.item.longitude);
            $("#streetNo").val(ui.item.streetNo);
            $("#streetName").val(ui.item.streetName);
            $("#streetNo").val(ui.item.streetNo);
            $("#town").val(ui.item.town);
            $("#postal").val(ui.item.postal);
            $("#province").val(ui.item.province);
            var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
            marker.setPosition(location);
            map.setCenter(location);

            $(".correctAddress").click(function() {
                if($(".correctAddress").val() == "yes") {
                    $("#map").hide('fast');
                };
            });

            $(".inCorrectAddress").click(function() {
                if($(".inCorrectAddress").val() == "no") {
                    $("#map").show('fast');
                };
            });
        }
    });
});

注意我只包含执行“工作”的代码。

它现在做了什么：：用户可以查找地址，获取自动填充建议，当他们选择地址时，会出现带有某些字段的“表单”，以及地址信息已经人口稠密。

但问题是，根据最终选择的地址，信息可能并不总是匹配。

即。 1139 Ontario Rd，Welland ON，L3B 5E5，加拿大将正常工作，字段将正确填充，但如果用户选择“地点”或不正确的地址，如：

Cornelia Ct，81 Cornelia St W，Smiths Falls等......

然后信息不好，因为不是街道号码，应该是81，我得到名字“Cornelia Ct”，因为在这个例子中：

streetNo : item.address_components[0].long_name,

该数组节点实际上是“Cornelia Ct”名称，这是该地址的第一部分。

我需要做的是提取地理编码返回的“类型”，如下例所示：https://developers.google.com/maps/documentation/geocoding/#JSON 或此链接上的信息： https://developers.google.com/maps/documentation/geocoding/#Types

这样，如果我可以这样做，街道号码将始终是“street_number”和街道名称“route”等等...，允许我保持我的数据有效和统一。

我已经在stackoverflow上查看了这个问题：

How to return address types from google maps geocode?这个答案有效，但它已经做了同样的事情。

我承认解析JSON的经验不多但是到目前为止我已经理解并尝试了，我认为有一种方法可以使用实际的“类型”名称而不是数组的节点号？

我尝试了各种各样的事情：

item.address_components['street_name'].long_name

和它的变化，但我似乎无法破解它。

此代码的第二个问题是，通过询问这些特定结果，自动完成搜索只会在您输入大部分内容时为您提供建议，就好像它在猜测之前等待匹配所有这些字段一样。

如果我可以在理论上使用地理编码“返回”之外的数组，那么它应该允许更流畅的搜索，就像我删除一样：

streetNo : item.address_components[0].long_name,
streetName : item.address_components[1].long_name,
town : item.address_components[2].long_name,
province : item.address_components[4].long_name,
postal : item.address_components[6].long_name,

提前感谢您的时间！

Answer 1

我自己就是这个，这是我的解决方案。我在输入中使用livequery，因为它可以隐藏/显示在我的代码中，但如果您愿意，可以编辑此行以删除插件。

$("#GeneralLocation").livequery(function() {
  $(this).autocomplete({
    //This bit uses the geocoder to fetch address values
    source: function(request, response) {
      geocoder.geocode( {'address': request.term }, function(results, status) {
        response($.map(results, function(item) {
          return {
            label:  item.formatted_address,
            value: item.formatted_address,
            address_components: item.address_components,
            latitude: item.geometry.location.lat(),
            longitude: item.geometry.location.lng()
          }
        }));
      })
    },
    minLength: 3,  //only start suggestions after this many chars
    //Executed upon selection of an address
    select: function(event, ui) {

  // Inline function, Return an address field by type
  function getaddrfield(addr,type) {
    var ret = "";
    $.each(addr,function(index, c) {
      if ($.inArray(type,c.types)>=0)
        ret = c.long_name;
    });
    return(ret);
  }

      loc_suburb = getaddrfield(ui.item.address_components, "locality");
      loc_state = getaddrfield(ui.item.address_components, "administrative_area_level_1");
      loc_country = getaddrfield(ui.item.address_components, "country");
    }
});

提示是最受欢迎的，但我希望能帮到某人。

唐祝你有美好的一天

从Google地理编码中提取地址类型

1 个答案: