使用Google自动完成功能的Angular 6 agm

时间:2018-07-25 14:57:24

标签: angular google-maps autocomplete google-places-api google-places

我正在运行Angular应用程序。我的前端有一张通过角度谷歌地图(agm-map)渲染的地图。使用Google Maps地方自动完成api时出现问题。因此,当我开始键入地址时,它会在我键入时开始在下面填充,并且如果我单击其中一个填充的地址,它将显示在地图上,这很好。我的问题是,如果我粘贴一个地址,为什么我粘贴的地址没有出现在地图上?要使此工作正常进行,我必须粘贴地址,然后在下面填充地址时,必须单击它。即使是我粘贴到正在填充的确切地址。在下面,我将发布我的mapsapiloader。有没有一种方法可以像我将地址粘贴到搜索栏上那样自动模拟自动填充地址下拉列表中的第一个选项?

this.mapsAPILoader.load().then(() => {
  const autocompleteInput = new google.maps.places.Autocomplete(this.pickupInputElementRef.nativeElement, {
    types: ['address']
  });

  const autocompleteOutput = new google.maps.places.Autocomplete(this.pickupOutputElementRef.nativeElement, {
    types: ['address']
  });
  this.setupPlaceChangedListener(autocompleteInput, 'pickup');
  this.setupPlaceChangedListener(autocompleteOutput, 'destination');
});



private setupPlaceChangedListener(autocomplete: any, inputType: string) {
    autocomplete.addListener('place_changed', () => {
      this.ngZone.run(() => {
        const place: google.maps.places.PlaceResult = autocomplete.getPlace();
        if (place.geometry === undefined) {
          return;
        }
        if (inputType === 'pickup') {
          this.service.origin = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() };
          this.service.originPlaceId = place.place_id;
        } else {
          this.service.destination = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() };
          this.service.destinationPlaceId = place.place_id;
        }
        if (this.service.directionsDisplay === undefined) {
          this.mapsAPILoader.load().then(() => {
            this.service.directionsDisplay = new google.maps.DirectionsRenderer;
          });
        }
        this.service.updateDirections();
        this.zoom = 12;
      });
    });
  }

0 个答案:

没有答案