Google自動補完場所にカスタム配列を追加するangularJS

Question

私のアプリケーションでは、gm-places-autocompleteというディレクティブを使用してGoogleプレイスでオートコンプリートを使用しています。私はこのオートコンプリートの提案を、既存のオートコンプリート機能で以下にリストされている私のカスタム配列で強化したいと思っています。 以下のように、私は以下の詳細とカスタムの配列を持っている私のHTML

<input type="text" gm-places-autocomplete ng-model="autocomplete" class="form-control" id="autoCompleteText" /> 

です。

 var arrayPlaces={[name:"myHome", lat:25.56,lng:56.12],[name:"office",lat:25.36,lng:51.25]} 

このカスタム配列をオートコンプリートの提案に含める必要があります。これを実現する方法はありますか？

JavascriptまたはJqueryを使用する他の方法は、角度JS以外です。

ありがとうございました

Answer 1

ここにあなたの状況のた​​めのjavascript方法です。オートコンプリートの結果は、AutocompleteService.getQueryPredictionsのコールバックで編集可能です。自動完成の結果が得られたら、自分の結果を追加して表示することができます。

function initService() { 
 
    var displaySuggestions = function(predictions, status) { 
 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
 
     alert(status); 
 
     return; 
 
    } 
 

 
    // add your custom suggestion here 
 
    // add to end 
 
    predictions.push({description: 'custom suggestion 2'}); 
 
    // add to head 
 
    predictions.unshift({description: 'custome suggestion 1'}); 
 

 
    predictions.forEach(function(prediction) { 
 
     //console.log(prediction); 
 
     var li = document.createElement('li'); 
 
     li.appendChild(document.createTextNode(prediction.description)); 
 
     document.getElementById('results').appendChild(li); 
 
    }); 
 
    }; 
 

 
    var service = new google.maps.places.AutocompleteService(); 
 
    service.getQueryPredictions({ 
 
    input: 'pizza near Syd' 
 
    }, displaySuggestions); 
 
}

<div id="right-panel"> 
 
    <p>Query suggestions for 'pizza near Syd':</p> 
 
    <ul id="results"></ul> 
 
</div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initService" async defer></script>