Google Maps otomatik tamamlama ile md-autocomplete otomatik tamamlamaService

Question

Yardımlarınız için şimdiden teşekkür ederiz.

Otomatik tamamlama kullanarak google AutocompleteService API'siyle etkileşim kurmak için otomatik tamamlama arama kutusu kurulumu yapmaya çalışıyorum.

Şu anda Açısal Otomatik Tamamlama Hizmeti'm iyi çalışıyor ve arama çubuğuna yazılanlara dayalı olarak bir dizi önerilen öngörüyü alıyor. Hizmet ı otomatik tamamlama bağlanmaya çalışıyorum formunu kontrol eden bir Kontrolörü enjekte edilir

angular 
    .module('LocalKnowledgeApp') 
    .service('AutocompleteService', [ function() { 

var self = this; 
var suggestions = []; 



    self.initPredict = function(searchInput) { 
    var predict = new google.maps.places.AutocompleteService(); 
    predict.getQueryPredictions({ input: searchInput }, self.displaySuggestions); 
    }; 

    self.displaySuggestions = function(predictions, status) { 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
     console.log(status); 
     return; 
    } 
    predictions.forEach(function(prediction) { 
     suggestions.push(prediction.description); 
    }); 
    }; 

    self.makeSuggestions = function(){ 
    return suggestions.slice(0,10); 
    }; 

O:

İşte benim Otomatik Tamamlama Hizmeti'dir. Şimdi arama çubuğunda bir açılır kutuyu almak için kadar Tel çalışıyorum

angular 
    .module('LocalKnowledgeApp') 
    .controller('RequestController', ['LocationService', 'MarkersService', 'AutocompleteService', '$http', '$scope', 
     function(LocationService, MarkersService, AutocompleteService, $http, $scope) { 

    var self = this; 
    var isInfoOpen = false; 
    var clickedRequest = {}; 
    var requestUser = {}; 
    var autocompleteStarted; 
    self.master = {}; 
    var autocompleteSuggestions = []; 

    // var search = autoCompleteSearch; 


    self.autoCompleteSearch = function(searchInput){ 
     if (searchInput.length < 2) { 
     self.autocompleteStarted = false; 
     } else { 
     AutocompleteService.initPredict(searchInput); 
     self.autocompleteStarted = true; 
     self.autocompleteSuggestions = AutocompleteService.makeSuggestions(); 
     return self.autocompleteSuggestions; 
     } 
    }; 

(sadece otomatik tamamlama bit katılan ve AutocompleteService ile etkileşime işlevi dahil ettik) kullanıcıları böylece Ardından, Google Otomatik Tamamlama hizmetinin RequestsController'a döndürdüğü önerilerin dizisinden seçim yapın.

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content" > 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Request a tour from a local</h4> 
     </div> 
     <div class="modal-body"> 
     <form> 
      <div class="form-group"> 
      <label for="location">Location</label> 
      <div> 
      <md-autocomplete 
       md-search-text-change="r.autoCompleteSearch(searchText)" 
       md-input-name="request.location" 
       md-selected-item="selectedItem" 
       md-search-text="searchText" 
       md-items="item in r.autocompleteSearch(searchText)" 
       md-item-text="item.display" 
       md-input-minlength="0"> 
       <md-item-template md-highlight-text="searchText"> 
       {{item.display}} 
       </md-item-template> 
      </div> 
      </md-autocomplete> 

      <aside ng-show="r.autocompleteStarted" id="autocompleteSuggestions"> 
       <ul ng-repeat="suggestion in r.autocompleteSuggestions track by $index"> {{suggestion}} </ul> 
      <aside> 
      </div> 

Ben ngMaterial modülü enjekte ve doğru yerde gerekli tüm Bower bileşenlere sahip olması - yönergesi girişine duyarlı olduğu için bunu biliyorum, ancak yalnızca gri bir kutu gösterir.

(function() { 
    'use strict'; 

    angular 
    .module('LocalKnowledgeApp', ['ngResource', 'ngMaterial']); 

}()); 

Bu benim web sayfası gibi bakıyor budur ...

[

Herhangi bir yardım çok takdir!

Answer 1

Eğik yönerge:

'use strict'; 

angular.module('locationApp', ['ngAnimate', 'ngMaterial']); 
angular.module('locationApp') 
.controller('HomeCtrl', function ($scope) { 
    // $scope.location={}; 

}); 
/** 
* @ngdoc directive 
* @name locationApp.directive:placeAutocomplete 
* @description 
* 
* # An element directive that provides a dropdown of 
* location suggestions based on the search string. 
* When an item is selected, the location's latitude 
* and longitude are determined. 
* 
* This directive depends on the Google Maps API 
* with the places library 
* 
* <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
* 
* Usage: 
* <place-autocomplete ng-model="selectedLocation"></place-autocomplete> 
* 
* Credit: 
* http://stackoverflow.com/a/31510437/293847 
*/ 
angular.module('locationApp') 
    .directive('placeAutocomplete', function() { 
     return { 
      templateUrl: 'place-autocomplete.html', 
      restrict: 'AEC', 
      replace: true, 
      scope: { 
       'ngModel': '=' 
      }, 
      controller: function ($scope, $q) { 
       if (!google || !google.maps) { 
        throw new Error('Google Maps JS library is not loaded!'); 
       } else if (!google.maps.places) { 
        throw new Error('Google Maps JS library does not have the Places module'); 
       } 
       console.log('google.maps.places ', google.maps.places); 
       var autocompleteService = new google.maps.places.AutocompleteService(); 
       var map = new google.maps.Map(document.createElement('div')); 
       var placeService = new google.maps.places.PlacesService(map); 
       console.log('google.maps.places ', placeService); 
       $scope.ngModel = {}; 

       /** 
       * @ngdoc function 
       * @name getResults 
       * @description 
       * 
       * Helper function that accepts an input string 
       * and fetches the relevant location suggestions 
       * 
       * This wraps the Google Places Autocomplete Api 
       * in a promise. 
       * 
       * Refer: https://developers.google.com/maps/documentation/javascript/places-autocomplete#place_autocomplete_service 
       */ 
       var getResults = function (address) { 
        var deferred = $q.defer(); 
        console.log('address ', address, autocompleteService) 
        autocompleteService.getQueryPredictions({ 
         input: address, 
         component: { 
          country: 'IN' 
         } 
        }, function (data) { 
         deferred.resolve(data); 
        }); 
        return deferred.promise; 
       }; 

       /** 
       * @ngdoc function 
       * @name getDetails 
       * @description 
       * Helper function that accepts a place and fetches 
       * more information about the place. This is necessary 
       * to determine the latitude and longitude of the place. 
       * 
       * This wraps the Google Places Details Api in a promise. 
       * 
       * Refer: https://developers.google.com/maps/documentation/javascript/places#place_details_requests 
       */ 
       var getDetails = function (place) { 
        var deferred = $q.defer(); 
        placeService.getDetails({ 
         'placeId': place.place_id 
        }, function (details) { 
         deferred.resolve(details); 
        }); 
        return deferred.promise; 
       }; 

       $scope.search = function (input) { 
        if (!input) { 
         return; 
        } 
        return getResults(input).then(function (places) { 
         return places; 
        }); 
       }; 
       /** 
       * @ngdoc function 
       * @name getLatLng 
       * @description 
       * Updates the scope ngModel variable with details of the selected place. 
       * The latitude, longitude and name of the place are made available. 
       * 
       * This function is called every time a location is selected from among 
       * the suggestions. 
       */ 
       $scope.getLatLng = function (place) { 
       if (!place) { 
        $scope.ngModel = {}; 
        return; 
       } 
       getDetails(place).then(function (details) { 
        $scope.ngModel = { 
         'name': place.description, 
         'latitude': details.geometry.location.lat(), 
         'longitude': details.geometry.location.lng(), 
        }; 
       }); 
      } 
     } 
    }; 
}); 

HTML kısmı:

<!DOCTYPE html> 
<html ng-app="locationApp"> 
    <head> 
     <!-- <link rel="stylesheet" href="place-autocomplete.css" /> --> 
     <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" /> 

     <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
     <!-- <script data-require="angular-route.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script> --> 
     <script data-require="angular-aria@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-aria.js"></script> 
     <script data-require="angular-animate@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script> 
     <script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
     <script src="place-autocomplete.js"></script> 
    </head> 

    <body> 
     <md-content> 
      <md-toolbar> 
       <div class="md-toolbar-tools"> 
        <h2> 
         <span>Google places/location suggestions with md-autocomplete</span> 
        </h2> 
        <span flex></span> 
       </div> 
      </md-toolbar> 
     </md-content> 
     <md-content layout-padding> 
      <p>Start typing the name of a place/location below</p> 
      <div class="md-padding"> 
       <place-autocomplete ng-model="location"></place-autocomplete> 
       <place-autocomplete ng-model="location1"></place-autocomplete> 
       <place-autocomplete ng-model="location2"></place-autocomplete> 
       <place-autocomplete ng-model="location3"></place-autocomplete> 
       {{location}} 
       {{location1}} 
       {{location2}} 
       {{location3}} 
       <script type="text/ng-template" id="place-autocomplete.html"> 
        <div> 
         <md-autocomplete md-no-cache="false" md-selected-item="location" md-selected-item-change="getLatLng(item)" ng-model-options="{debounce: 600}" md-search-text-change="search(searchText)" md-search-text="searchText" md-items="item in search(searchText)" md-item-text="item.description" md-min-length="2" md-max-length="50" md-floating-label="Location (place, city or region)"> 
          <md-item-template> 
           <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.description}}</span> 
          </md-item-template> 
          <md-not-found> 
           No matches found for "{{searchText.description}}". 
          </md-not-found> 
         </md-autocomplete> 
        </div> 
       </script> 
       <div ng-if="location.name"> 
        <h4>Selected location</h4> 
        <pre>{{location}}</pre> 
       </div> 
      </div> 
     </md-content> 
    </body> 
</html> 

Daha fazla ayrıntı için:

https://gist.github.com/vinaygopinath/49df0b58a276281e5ffa