Question

我在AngularJS应用程序中使用GoogleMaps Autocomplete，当我打电话给...

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

autocomplete工作得很好，但是当我打电话给“getPlace（）”时一半的时间......

未定义下面一行中的

“几何体”。 place.geometry.location.lng（）

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

Answer 1

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

问题实际上是试图对我设置为等于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 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（）只会在我第一次在每个新地址上调用时返回'undefined'。

我仍然不确定为什么会这样，谷歌也不会因为我使用我们的谷歌云支持看看他们是否有任何想法，事实证明他们没有。

这是我提出的解决方案...... 基本上在上面代码的“创建自动完成”部分中，我放弃了自动完成功能，并将其替换为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”添加到用于地址/地点搜索

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

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

2 个答案: