自動完成自定義結果？

我正在使用Google Maps API v3位置（使用自動完成服務）搜索位置的項目。自動完成自定義結果？

它工作得很好，並且允許您從許多不同的國家進行搜索，我希望如何在結果窗格中添加一些自定義結果（例如「Mikes place」）（如果有人開始輸入「Mike」）。

是否可以將我自己的結果添加到Google地圖的地方搜索結果中，還是應該使用一些jQuery自動完成功能並嘗試使用我自己的方式添加Google搜索結果？

2013-08-17 Tiit

它可能對你來說有點晚，但我偶然發現了你的問題，然後才決定在我維護的Google Maps Autocomplete component for Angular JS中實現這個功能。希望有人發現它有幫助。

使用該組件，您可以指定自定義位置結果，該結果將混合到自動完成服務返回的結果中。

這裏有一個工作示例：

<!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

自動完成自定義結果？

回答

相關問題