Google Maps completamento automatico con un design materiale

Question

Ho una domanda circa l'attuazione di Google Maps automatico la funzione completa nel design materiale:

<md-autocomplete flex="" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-floating-label="Favorite state"> 
    <span md-highlight-text="ctrl.searchText">{{item.display}}</span> 
</md-autocomplete> 

Angular Material autocomplete | Google Maps autocomplete

Come posso utilizzare il completamento automatico del design del materiale in google maps auto completo (angolare)?

Grazie in anticipo.

ho trovato questa soluzione: i sovrascrivere solo i parametri fisico css:

/*maps autocomplete*/ 
.pac-item{ 
    font-family:RobotoDraft,Roboto,'Helvetica Neue',sans-serif !important; 
    font-weight: 300 !important; 
    color: rgb(33,33,33) !important; 
    line-height: 40px !important; 
    /*font-weight: 800;*/ 
} 

.pac-item-query{ 
    font-family:RobotoDraft,Roboto,'Helvetica Neue',sans-serif !important; 
    font-size: 16px; 
} 

.pac-item:hover{ 
    background-color: #eeeeee !important; 
    transition: background .15s linear; 
} 

.pac-container{ 
    color: rgb(33,33,33) !important; 
    background-color: #fafafa; 
    /*font-weight: 800;*/ 
} 

.pac-icon, .pac-icon-marker{ 
    background: none !important; 
    background-image: none !important; 
} 

Answer 1

Sì Penso che tu sia sulla strada giusta. Il completamento automatico di Google ha il suo DOMrendered in alto (o in basso? Mi dispiace non posso ricordare) del documento e gestori di eventi che si legano a loro.

La semplice via d'uscita è la sovrascrittura delle regole css per soddisfare le vostre esigenze. Ma se questo non funziona, puoi sempre utilizzare l'API di google geocode

https://developers.google.com/maps/documentation/geocoding/ per lavorare con la direttiva md-autocomplete di Material design. Hai la flessibilità di lavorare con i dati geografici solo in formato json da API restful e fai quello che vuoi con esso., Ma il compromesso ti fa perdere alcune capacità (ad esempio non puoi ordinare la partita in base al tuo luogo attuale, devi usare la regione o città per restringerli manualmente).

Answer 2

abbiamo avuto la stessa esigenza esatta per la nostra applicazione, e siamo riusciti a farlo nel modo "corretto", così qui si ha la soluzione con la direttiva md-completamento automatico (utilizzando Angular Material), approfittando della AutocompleteService API da Google.

Vista:

<md-autocomplete md-no-cache="true" 
       md-selected-item="vm.selectedItem" 
       md-search-text-change="vm.search(vm.searchText)" 
       md-search-text="vm.searchText" 
       md-items="item in vm.search(vm.searchText)" 
       md-item-text="item" 
       md-min-length="0" 
       placeholder="Type your address"> 
    <md-item-template> 
    <span md-highlight-text="vm.searchText" md-highlight-flags="^i">{{item}}</span> 
    </md-item-template> 
    <md-not-found> 
    No matches found for "{{vm.searchText}}". 
    </md-not-found> 
</md-autocomplete> 

Controller:

vm.search = search; 

function search(address) { 
    var deferred = $q.defer(); 
    getResults(address).then(
    function (predictions) { 
     var results = []; 
     for (var i = 0, prediction; prediction = predictions[i]; i++) { 
     results.push(prediction.description); 
     } 
     deferred.resolve(results); 
    } 
); 
return deferred.promise; 
} 

function getResults(address) { 
    var deferred = $q.defer(); 
    vm.gmapsService.getQueryPredictions({input: address}, function (data) { 
    deferred.resolve(data); 
    }); 
    return deferred.promise; 
} 

basta ricordarsi di creare il servizio sul tuo Attivazione del regolatore:

vm.gmapsService = new google.maps.places.AutocompleteService(); 

e di aggiungere la dipendenza JavaScript sul tuo applicazione principale file:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KE‌​Y&libraries=places"></script> 

Tutto il vm. roba è perché usiamo il John Papa Styleguide

Spero che funzioni per voi!