谷歌地图 API autocomplete.getPlace() 不一致地返回几何

Question

我在 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()

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

Answer 1

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

问题实际上是试图对我设置为等于 new 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"
/>

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

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

Answer 2

好的，这是一个非常难以解决的问题，因为原因并不明显...autoComplete.getPlace() 在我第一次在每个新地址上调用它时只会返回“未定义”。

我仍然不确定为什么会发生这种情况，谷歌也不是，因为我使用我们的谷歌云支持来查看他们是否有任何想法，结果他们没有。

这是我想出的解决方案... 基本上在我上面代码的“创建自动完成”部分中，我放弃了自动完成并将其替换为 google.maps.places。

请务必在调用 google API 时添加“地点”...

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

这就是它的样子……

          $scope.initAutoComplete = function(){

                    //get textbox used for address or place search
                    var input = document.getElementById('autocomplete');

                    //create google places variable and bind input to it.
                    var searchBox = new google.maps.places.SearchBox(input);


                    // When the user selects an address from the dropdown, 
                      trigger function
                    searchBox.addListener('places_changed', function () {
                        //calling "getPlaces" instead of get place()

                        var place = searchBox.getPlaces();

                        //passing place to my dropPin service
                        rcisMapService.dropPin(place);
                    });
                };

我还添加了 class="controls" 用于地址/地点搜索

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