javascript - Google Maps Api 使用自定义字符串运行 getPlaces

Question

我正在使用 Google map 自动完成功能，一切正常。

但我想知道是否可以从自定义字符串运行 .getPlace() 函数，无论是坐标还是地址。例如，我不想使用输入字段并单击位置来选择它，而是想手动调用它，如下所示:

var myAutoComplete = new google.maps.places.Autocomplete('City, Country');

它返回与普通自动完成相同的结果。我之所以要这样做，是因为我从 html5 geolocation(或其他方法)获取用户位置，我想用它运行 getPlace 函数数据。

google 的 getPlace 函数返回一组更完整的数据，包括该城市的所有名称、坐标、图片等。

顺便说一下，我在这个模块中使用 Google map 和 AngularJs:ngMap .

---

编辑:根据评论的要求发布我目前拥有的代码。

//HTML
<input places-auto-complete on-place-changed="vm.placeChanged()" />


//Controller
function MainController(NgMap) {
    var vm = this;

     vm.placeChanged = function() {
        var param = {
            maxWidth: 1920,
            maxHeight: 1080
        };

        var autocomplete = this.getPlace();

        console.log('Result: ', autocomplete);
        console.log(autocomplete.geometry.location.lat());
        console.log(autocomplete.geometry.location.lng());
        console.log(autocomplete.photos[0].getUrl(param));
    }
}

输入自动生成自动完成功能，当我选择一个地址选项时，该函数被调用并且我得到了所有正确的响应。

我想要的是调用相同的函数，而不是使用来自谷歌的自动完成，我想传递我自己的字符串并返回与函数相同的数据。

---

正如评论中所建议的那样，我尝试使用自定义指令来运行相同的自动完成功能，这是我的插件:http://plnkr.co/edit/hcRXJxB7ItN6YtISWdx3?p=preview

Answer 1

Autocomplete object不支持这种情况，它只能附加到用户选择项目的指定输入文本字段，并返回相应的位置。

相反，您可以使用 AutocompleteService class我认为这非常适合您的情况

根据官方文档AutocompleteService class

does not add any UI controls. Instead, it returns an array of prediction objects, each containing the text of the prediction, reference information, and details of how the result matches the user input. This is useful if you want more control over the user interface than is offered by the Autocomplete

以下示例演示如何从文本框中输入的字符串返回Place 的详细信息

示例

var app = angular.module('myApp', ['ngMap']);

app.controller('MyCtrl', function ($scope,NgMap) {
  var vm = this;
  vm.center = [0,0];

  vm.types = "['establishment']";

  NgMap.getMap().then(function (map) {
    vm.map = map;
  });

  vm.addressResolved = function (value) {

    $scope.$apply(function () {
      vm.address = value.address_components;
      vm.center = value.geometry.location;
    });




  }

});


app.directive('myComplete', function (NgMap) {
  return {
    restrict: 'A',
    scope: {
      map: '=',
      addressResolved: '&addressResolved'
    },
    link: function (scope, element, attrs) {
      // on blur, update the value in scope
      element.bind('blur', function (blurEvent) {

        var service = new google.maps.places.AutocompleteService();
        service.getQueryPredictions({ input: element.val() }, function (predictions, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {

            if (predictions.length > 0) {
              element.val(predictions[0].description);


              var service = new google.maps.places.PlacesService(scope.map);
              service.getDetails({
                placeId: predictions[0].place_id
              }, function (place, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {

                  scope.addressResolved({ place: place });
                }
              });
            }
          }
        });
      });
    }
  };

});

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl as vm">
  Auto Complete Type:
  <select ng-model="vm.types">
    <option value="['geocode']">Geodode</option>
    <option value="['establishment']">Establishment</option>
    <option value="['address']">Address</option>
  </select><br/>

  
  <h3>Custom directive usage</h3>
  <input my-complete address-resolved="vm.addressResolved(place)" map="vm.map" />
  address : <pre>{{vm.address | json}}</pre>  
  <ng-map  zoom="12" center="{{vm.center}}"></ng-map>
</div>

Demo