자동 완성 맞춤 검색 결과?

Google Maps API v3 장소 (자동 완성 서비스 포함)를 사용하여 위치를 검색하는 프로젝트에서 작업 중입니다.자동 완성 맞춤 검색 결과?

멋지게 작동하며 결과 페이지에 맞춤 검색 결과 (예 : '마이크 장소')를 추가하려는 경우 (여러 사람이 "마이크"를 입력하기 시작한 경우) 다양한 국가를 검색 할 수 있습니다.

Google지도 장소 검색 결과에 내 결과를 추가 할 수 있습니까? 아니면 일부 jQuery 자동 완성 기능을 사용해야하고 내 결과로 Google 결과를 추가해야합니까?

2013-08-17 Tiit

아마도 조금 늦었을 테지만, 내가 유지하고있는 Google Maps Autocomplete component for Angular JS에 직접 구현하기로 결정하기 전에 문제가 발생했습니다. 바라기를 누군가 도움이 되었기를 바랍니다.

구성 요소를 사용하여 사용자 지정 장소 결과를 지정하여 AutocompleteService에서 가져온 결과에 혼합 할 수 있습니다.

<!DOCTYPE html> 
<html lang="en" ng-app="example"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Injecting Custom Place Predictions</title> 

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="../src/autocomplete.css"> 

    <!-- Required dependencies --> 
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
    <script src="lib/underscore/underscore.js"></script> 
    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular-touch/angular-touch.js"></script> 

    <!-- Google Places Autocomplete directive --> 
    <script src="../src/autocomplete.js"></script> 

    <script> 
     angular.module('example', ['google.places']) 

       // Setup a basic controller 
       .controller('MainCtrl', function ($scope) { 
        $scope.place = null; 

        $scope.myPlaces = [ 
         toGooglePlacesResult({ 
          label: 'International Airport - T1, Sydney, New South Wales', 
          address: { 
           street: 'International Airport - T1', 
           suburb: 'Sydney', 
           state: 'NSW' 
          }, 
          location: { latitude: -33.936722, longitude: 151.164266 } 
         }), 
         toGooglePlacesResult({ 
          label: 'Domestic Airport - T2, Sydney, New South Wales', 
          address: { 
           street: 'Domestic Airport - T2', 
           suburb: 'Sydney', 
           state: 'NSW' 
          }, 
          location: { latitude: -33.933617, longitude: 151.181630 } 
         }), 
         toGooglePlacesResult({ 
          label: 'Domestic Airport - T3, Sydney, New South Wales', 
          address: { 
           street: 'Domestic Airport - T3', 
           suburb: 'Sydney', 
           state: 'NSW' 
          }, 
          location: { latitude: -33.933076, longitude: 151.181270 } 
         }) 
        ]; 

        function toGooglePlacesResult(config) { 
         return { 
          formatted_address: config.label, 
          address_components: [ 
           { 
            long_name: config.address.street, 
            short_name : config.address.street, 
            types: [ 'route' ] 
           }, 
           { 
            long_name: config.address.suburb, 
            short_name: config.address.suburb, 
            types: [ 'locality' ] 
           }, 
           { 
            long_name: config.address.state, 
            short_name: config.address.state, 
            types: [ 'administrative_area_level_1' ] 
           } 
          ], 
          geometry: { 
           location: { 
            lat: function() { return config.location.latitude }, 
            lng: function() { return config.location.longitude } 
           } 
          } 
         }; 
        } 
       }); 
    </script> 
</head> 
<body ng-controller="MainCtrl"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h1>Injecting Custom Place Predictions</h1> 

      <form class="form"> 
       <input class="form-control" g-places-autocomplete custom-places="myPlaces" ng-model="place"/> 
      </form> 

      <h5>Result:</h5> 
      <pre>{{place | json}}</pre> 
     </div> 
    </div> 
</div> 
</body> 
</html>

중요한 부분이 있는지 확인하고 있습니다 사용자 정의 장소의 결과가 실제로 다음 custom-places 속성을 사용하여 지시에 결과를 배선 및 결과 최소한의 진정한 장소처럼 :

다음은 작업 예입니다.

출처

2014-08-21 05:45:03 kuhnza

라이브러리를 http://angular-ui.github.io/angular-google-maps와 어떻게 사용합니까? – TWilly

자동 완성 맞춤 검색 결과?

답변

관련 문제