Javascript Google maps API autocomplete.getPlace（）返回的几何体不一致

我在AngularJS应用程序中使用GoogleMaps Autocomplete，当我调用

autocomplete.getPlace(); 

当我尝试使用place时，有一半的时间它会说几何体为空 有一半的时间是有效的

似乎无法理解……我唯一的想法是，在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);
};

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);
};

我的DropPin功能…

 <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);
};

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);
};

autocomplete工作得很好，但是当我调用“getPlace（）”时
一半的时间

下一行中的“几何体”未定义。 place.geometry.location.lng（）

---

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

好的，这是一个很难解决的问题，因为原因并不明显……autoComplete.getPlace（）在我第一次对每个新地址调用它时只会返回“undefined”

我仍然不知道为什么会发生这种情况，谷歌也不知道，因为我使用了我们的谷歌云支持，看看他们是否有任何想法，结果证明他们没有

这是我想出的解决办法。。。 基本上，在我上面代码的“创建自动完成”部分，我放弃了自动完成，取而代之的是google.maps.places

请确保在您对google API的调用中添加“位置”

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YourKey&libraries=imagery,places">

我还将class=“controls”添加到用于地址/地点搜索的

---

此解决方案每次都会持续返回。

我在Vue.js应用程序中遇到同样的问题。第一次尝试

getPlace（）

返回

undefined

，第二次尝试将按预期返回google place对象

问题实际上是试图对我设置为新的google.maps.places.Autocomplete（input）的相同数据属性进行v-model建模

最初我是这样做的：

    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 self = this;

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', () => {
  self.autocomplete = auto_complete.getPlace();
  console.log(self.autocomplete, 'place');
});

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

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

这就是模板：

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

资源：

---

当getPlace“不工作”时，您是否在自动完成查询（用户输入）中看到任何模式？请提供一个工作示例/提琴，并给出一些无法返回几何体的查询示例。或者，当它不起作用时，使用并给出一个例子。MrUpsidown感谢您的回复，我周末无法访问我的计算机…我将在本周一创建一个Plunkr或小提琴。betofarina，是的，它间歇性地起作用…这意味着我可以运行它并拥有“几何”未定义，然后我立即再次运行它并定义几何体…我认为这是某种计时方式，在自动完成之前，我的代码将继续。getPlace（）返回。我得到的“getPlaces（）”不是一个函数。您是否在对GoogleAPI的调用中添加了位置？我用了你的答案，节省了我的时间，谢谢。