0

目標: ユーザーが入力した住所をジオコーディングし、情報を取得してフォームに配置し、この情報をデータベースに入力しようとしています。

これまでの道のり: 次のコードを使用して、このタスクをある程度成功させました。

$(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');
                };
            });
        }
    });
});

注「作業」を行うコードのみを含めました。

現在の動作: ユーザーは住所を検索でき、オートコンプリートの候補が表示されます。住所を選択すると、いくつかのフィールドを含む「フォーム」が表示され、住所情報が既に入力されています。

ただし、最終的にどのアドレスが選択されるかによって、必ずしも情報が一致するとは限らないという問題があります。

IE 1139 Ontario Rd, Welland ON, L3B 5E5, Canada は正常に機能し、フィールドは正しく入力されますが、ユーザーが「場所」または次のような間違った住所を選択した場合:

Cornelia Ct、81 Cornelia St W、Smiths Falls ON など....

次に、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でこの質問をチェックアウトしました:

Googleマップのジオコードから住所タイプを返す方法は? その答えは機能しますが、私がすでに行っているのと同じことをしています。

確かにJSONを解析した経験はほとんどありませんが、これまでに理解して試したことで、配列のノード番号の代わりに実際の「タイプ」名を使用する方法があると思いますか?

私は次のようなさまざまなことを試しました：

item.address_components['street_name'].long_name

とバリエーションがありますが、クラックできないようです。

このコードの 2 つ目の問題は、これらの特定の結果を要求することで、オート コンプリート検索は、推測する前にすべてのフィールドに一致するのを待っているかのように、ほとんどの入力が既に入力されている場合にのみ提案を提供することです。

理論的にジオコーディングからの「リターン」の外で配列を使用できれば、次のものを削除した場合と同様に、より流動的な検索が可能になります。

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,

お時間をいただきありがとうございます。

4

1 に答える 1

0

私はこれを自分で機能させました。これが私の解決策です。コードで非表示/表示できるため、入力で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");
    }
});

ヒントは大歓迎ですが、それが誰かの助けになることを願っています。

素晴らしい一日を

于 2013-03-02T12:31:09.093 に答える