Google 映射 API autocomplete.getPlace() 不一致 returns 几何

Question

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

autocomplete.getPlace();

当我尝试使用 place 时，有一半时间它说 geometry is null 一半的时间它有效...

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

我的图书馆包括...

 <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()"
一半时间...

下面一行中的

"geometry" 未定义。 place.geometry.location.lng()

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

Answer 1

好吧，这是一个很难解决的问题，因为原因不明显...autoComplete.getPlace() 只会 return 'undefined' 我第一次调用它在每个新地址上。

我仍然不确定为什么会这样，Google 也不是，因为我使用了我们的 google 云支持来查看他们是否有任何想法，结果他们没有。

这是我想出的解决方案... 基本上在我上面代码的 "Creating AutoComplete" 部分我放弃了自动完成并将其替换为 google.maps.places.

请务必在您对 google API...

的调用中添加 "places"

<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" 用于 address/place 搜索

这个解决方案每次都一致 returns。

Answer 2

我在 Vue.js 应用程序中遇到了同样的问题。第一次尝试 getPlace() returned undefined，第二次尝试 return google 按预期放置对象。

问题实际上是试图对我设置为 new google.maps.places.Autocomplete(input) 的相同数据属性进行 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');
});

这是我最初尝试的数据 set/model:

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

Google 映射 API autocomplete.getPlace() 不一致 returns 几何

Google maps API autocomplete.getPlace() inconsistently returns geometry

javascript

google-maps

google-maps-api-3

google-maps-markers