Googleプレイスでカスタムデフォルトの場所を追加するオートコンプリート

Question

自動補完機能を使用するGoogle place APIで入力を行いたいと思います。これは私のコードです：

var options = { 
    componentRestrictions: { 
     country: "de" 
    } 
    }; 
var place = ''; 

    var locationAutocompleteOneWay = document.getElementById('locationAutocompleteOneWay'); 
    var autocompleteLocationOneWay = new google.maps.places.Autocomplete(locationAutocompleteOneWay, options); 
    google.maps.event.addListener(autocompleteLocationOneWay, 'place_changed', function() { 
    place = autocompleteLocationOneWay.getPlace(); 
    }); 

さらにカスタマイズするには、テキストボックスに入力するときにカスタムの結果を追加します。ここに私のコードと結果：

setTimeout(function() { 
    $(".pac-container").append('<div id="areasearch" class="pac-item areasearch"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>Test place</span> <span>custom place</span></div>'); 
    }, 500); 

しかし、私は結果をクリックしたとき、それは結果の値を持っていたlocationAutocompleteOneWay私の入力を行いたいです。しかし、私はそれを作る方法を知らない。そして、私はそれがページ上の複数入力に適用できることを望みます。私はjQueryとAngularJSを使っています。 JqueryとAngularJSのすべてのソリューションは私には良いことです。ありがとうございました。

Answer 1

私が見つけたのは、緯度/経度（および必要なもの）を設定するために使用できる属性を追加しているカスタム位置をロードすると、mousedownイベントにバインドしてカスタムプレースオブジェクトをオートコンプリートに追加します。私のスクリプトで

、私はオートコンプリートに項目を追加し、次のスニペット（これはページ上のすべてのオートコンプリート要素に追加されます）があります。私は、クラスのPAC項目とカスタムを使用して

$(".pac-container").append('<div id="areasearch' + i + '" class="pac-item areasearch custom" val="' + PlaceName + '" lat="' + Latitude + '" lng="' + Longitude + '" style="display: none;"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>' + PlaceName + '</span> <span>' + LocationName + '</span></div>'); 

を次のようにバインドします

 setTimeout(function() { 
      $("div.pac-item.custom").mousedown(function() { 
       setCustomLocation($(this)); 
      }) 
     }, 100); 

とカスタムロケーション機能は次のとおりです。

setCustomLocation = function (obj) { 
     $("#" + currInput).val($(obj).attr("val")); 
     var newObj = {}; 
     newObj["geometry"] = {} 
     newObj["geometry"]["location"] = {} 
     newObj["geometry"]["location"]["lat"] = function() { return $(obj).attr("lat"); } 
     newObj["geometry"]["location"]["lng"] = function() { return $(obj).attr("lng"); } 
     currAutocomplete.set("place", newObj); 
    } 

最初の行はアクティブな入力フィールドに名前を設定し、残りはアクティブなオートコンプリート用のプレースオブジェクトを設定します（他のイベントで取り込まれた両方の変数）。このプロジェクトに必要な値はジオメトリの緯度/経線ですが、もっと必要な場合は、親から取得する必要がある値をロードしてください。