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

Question

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

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

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

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

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

顺便说一下，我正在使用带有 AngularJs 的 Google map 和此模块: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));
    }
}

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

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

---

根据评论中的建议，我尝试使用自定义指令来运行相同的自动完成功能，这是我的 plunkr: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

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

示例

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