Google 地图 API autocomplete.getPlace() 返回的几何图形不一致

我在 AngularJS 应用程序中使用 GoogleMaps 自动完成功能，当我调用...

autocomplete.getPlace(); 

当我尝试使用地方时，有一半的时间它说几何图形为空 一半的时间都有效...

似乎无法弄清楚......我唯一的想法是我的代码在 getPlace() 返回之前继续运行，但我不知道如何等待它完成？

我的图书馆包括...

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKey&libraries=imagery,places,geometry">
 </script>    

创建自动完成...

this.autocomplete = null;
$scope.initAutoComplete = function() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.

  webMapValues.autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */ (document.getElementById('autocomplete')), {
    types: ['geocode']
  });

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  webMapValues.autocomplete.addListener('place_changed', rcisMapService.dropPin);
};

我的 DropPin 功能...

mapSVC.dropPin = function() {

  var place = webMapValues.autocomplete.getPlace();

  webMapValues.mapObj.getView().setCenter(ol.proj.transform([place.geometry.location.lng(), place.geometry.location.lat()], 'EPSG:4326', 'EPSG:3857'));
  webMapValues.mapObj.getView().setZoom(17);
  webMapValues.marker = new google.maps.Marker({
    map: webMapValues.gmapObj,
    anchorPoint: new google.maps.Point(0, -29)
  });
  webMapValues.marker.setIcon( /** @type {google.maps.Icon} */ ({
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(35, 35)
  }));
  webMapValues.marker.setPosition(place.geometry.location);
  webMapValues.marker.setVisible(true);
};

自动完成功能运行良好，但是当我调用“getPlace()”时
有一半的时间...

下面一行中的“几何”未定义。 place.geometry.location.lng()

非常感谢您提供的任何帮助！

我在使用 Vue.js 应用程序时遇到了同样的问题。第一次尝试getPlace()回undefined第二个将按预期返回 google place 对象。

问题实际上是试图对我设置的相同数据属性进行 v 建模new google.maps.places.Autocomplete(input).

最初我是这样做的：

    const input = this.$refs.autocomplete;
    const options = {
      types: ['address'],
    };

    this.autocomplete = new google.maps.places.Autocomplete(
      input,
      options,
    );

    this.autocomplete.setFields(['address_components', 'name']);

    this.autocomplete.addListener('place_changed', () => {
      let place = this.autocomplete.getPlace();
      console.log(place, 'place');
    });

但最终对我有用的是：

const input = this.$refs.autocomplete;
const options = {
  types: ['address'],
};

let auto_complete = new google.maps.places.Autocomplete(
  input,
  options,
);

auto_complete.setFields(['address_components', 'name']);

auto_complete.addListener('place_changed', () => {
  this.autocomplete = auto_complete.getPlace();
  console.log(this.autocomplete, 'place');
});

这是我最初尝试设置/建模的数据：

data() {
  return {
    autocomplete: '',
  };
}

这是模板：

<input
  v-model="location"
  ref="autocomplete"
  type="text"
/>

资源：https://medium.com/dailyjs/google-places-autocomplete-in-vue-js-350aa934b18d https://medium.com/dailyjs/google-places-autocomplete-in-vue-js-350aa934b18d

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete