Google Maps mit autocomplete Material Design

Question

Ich habe eine Frage über die Implementierung von Google Maps Auto-Vervollständigen-Funktion in Materialdesign:

<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

Wie kann ich die Auto-Vervollständigung von Material-Design in Google Maps automatisch vervollständigen (eckig)?

Vielen Dank im Voraus.

ich diese Lösung gefunden habe: ich überschreiben nur die CSS-proprties:

/*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

Ja, ich glaube, Sie auf etwas sind. Die Google Auto-Vervollständigung hat ihre eigenen DOMrendered auf der Oberseite (oder unten? Entschuldigung, ich kann nicht remember) der Dokumenten-und Event-Handler Bindung an sie.

Der einfache Ausweg ist das Überschreiben der CSS-Regeln, um Ihre Anforderungen zu erfüllen. Aber wenn das nicht funktioniert, können Sie immer Google Geocode API

https://developers.google.com/maps/documentation/geocoding/ verwenden, um mit Material Design MD-Autocomplete-Richtlinie zu arbeiten. Sie erhalten die Flexibilität, mit nur JSON-Format-Geodaten aus der Restful-API zu arbeiten und alles zu tun, was Sie wollen. Aber der Kompromiss besteht darin, dass Sie einige Fähigkeiten verlieren (z. B. können Sie das Match nicht nach Ihrem aktuellen Standort sortieren, sondern Region verwenden) oder Stadt, um sie manuell zu beschränken).

Answer 2

Wir hatten genau die gleiche Anforderung für unsere App, und wir schafften es, die "richtige" Art und Weise zu tun, also hier haben Sie die Lösung mit der md-Autocomplete-Richtlinie (Angular Material), unter Ausnutzung der AutocompleteService API von Google.

Ausblick:

<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; 
} 

Denken Sie daran, den Dienst auf Ihrem Controller Aktivierung zu erstellen:

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

Und die Javascript-Abhängigkeit von Ihrem Haupt-App hinzufügen Datei:

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

Alle vm. Zeug ist, weil wir die John Papa Styleguide

Hope verwenden, die es für Sie arbeitet!