正在加载 Google 个位置自动完成异步 Angular 2

Question

我正在尝试在 Angular 2 组件中实例化 Google Places Autocomplete 输入。我使用这段代码来做到这一点：

loadGoogle() {
    let autocomplete = new google.maps.places.Autocomplete((this.ref.nativeElement), { types: ['geocode'] });
    let that = this
    //add event listener to google autocomplete and capture address input
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      let place = autocomplete.getPlace();
      that.place = place;
      that.placesearch = jQuery('#pac-input').val();
    });
    autocomplete.addListener()
  }

通常情况下，我相信，我会使用 Google API 提供的回调函数来确保在该函数运行之前加载它，但我无法在组件的范围。我能够在 90% 的时间内加载自动完成输入，但在较慢的连接上，我有时会出错

google is not defined

有没有人知道如何确保 Google API 在实例化之前加载到组件中。

Answer 1

不确定这是否有帮助，但我只是在我的 index.html 中使用一个简单的脚本标记来加载 Google API，而且我从未收到任何错误。我相信你也会这样做。我 post 我的代码在这里，希望它有帮助。

注意：我使用Webpack加载其他脚本，除了Google Map API.

<html>
  <head>
    <base href="/">
    <title>Let's Go Holiday</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Google Map -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your-key>&libraries=places"></script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

然后在你的组件中：

...
declare var google: any;

export class SearchBoxComponent implements OnInit {

  ngOnInit() {
    // Initialize the search box and autocomplete
    let searchBox: any = document.getElementById('search-box');
    let options = {
      types: [
        // return only geocoding results, rather than business results.
        'geocode',
      ],
      componentRestrictions: { country: 'my' }
    };
    var autocomplete = new google.maps.places.Autocomplete(searchBox, options);

    // Add listener to the place changed event
    autocomplete.addListener('place_changed', () => {
      let place = autocomplete.getPlace();
      let lat = place.geometry.location.lat();
      let lng = place.geometry.location.lng();
      let address = place.formatted_address;
      this.placeChanged(lat, lng, address);
    });
  }
  ...
}

Answer 2

我按照上面解释的方式使用它，但根据 google 页面速度，我得到了这个建议，

移除渲染阻塞JavaScript： http://maps.googleapis.com/…es=geometry,places®ion=IN&language=en

所以我改变了我的实现，

<body>
  <app-root></app-root>
  <script src="http://maps.googleapis.com/maps/api/js?client=xxxxx2&libraries=geometry,places&region=IN&language=en" async></script>
</body>

/* 现在在我的 component.ts */

  triggerGoogleBasedFn(){
    let _this = this;

    let interval = setInterval(() => {
      if(window['google']){
        _this.getPlaces();
        clearInterval(interval);
      }
    },300)
  }

您还可以做一件事，在收到值 (google) 后发出事件，并触发您的 google 任务在他们里面。

正在加载 Google 个位置自动完成异步 Angular 2

Loading Google Places Autocomplete Async Angular 2

asynchronous

observable

google-places-api

google-places

angular