Как хранить лат и лонг из автозаполнения мест Google в Angular - PullRequest
Новая
       8

Как хранить лат и лонг из автозаполнения мест Google в Angular

0 голосов
/ 25 июня 2018

Я решил опубликовать вопрос и ответ в stackoverflow, так как, когда я следовал этому учебнику год назад: https://www.youtube.com/watch?v=pxyX_5mtlTk. Я пытался извлечь lat и long из автозаполнения мест Google в Angular.Я попытался отыскать решение, разместил вопрос здесь (никто не ответил, поэтому я удалил свой вопрос) , и мне не повезло, в конце концов я смог его выяснить и решил опубликовать на YouTubeучебник, который я знаю, как это сделать, поскольку год назад я получил 35 писем с просьбой найти решение, поэтому я решил поделиться им и здесь.

1 Ответ

0 голосов
/ 25 июня 2018

Проблема в том, что автозаполнение Google использует обратные вызовы, и когда вы хотите сохранить информацию, заполняемую API, вам будет трудно ее сохранить, если она не находится внутри обратного вызова.

В вашем файле TS 

autocompleteSearch() {
        this.mapsAPILoader.load().then(
      () => {        
         let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, {types:["address"]});

         autocomplete.addListener("place_changed", ()=>{
           this.ngZone.run(()=>{
             let place: google.maps.places.PlaceResult = autocomplete.getPlace();

             if(place.geometry === undefined || place.geometry === null) {
               return;
             }
             this.lat = place.geometry.location.lat();
             this.lng = place.geometry.location.lng();

           })
         })
      }      
     );
     console.log(this.lat, this.lng)
  }

В вашем HTML 

<input [hidden]="!isLoggedIn()" class="albergueInfo" type="text" autocorrect="off" autocapitalized="off" 
      spellcheck="off"
      placeholder=""
      #address [value]="addressValue" (input)="addressValue=$event.target.value"/>

Вы также можете получить больше информации, чем просто широтаи долгота .Следуя структуре объектов api json в Google местах (https://developers.google.com/places/web-service/details), вы можете сделать что-то вроде: 

autocompleteSearch() {
    this.mapsAPILoader.load().then(
    () => {        
      let autocomplete = new google.maps.places.Autocomplete(this.addressElement.nativeElement, {types:["address"]});
      autocomplete.addListener("place_changed", ()=> {
        this.ngZone.run(()=>{
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          if(place.geometry === undefined || place.geometry === null) {
            return;
          }

          this.lat = place.geometry.location.lat();
          this.long = place.geometry.location.lng();
          this.addressArray = place.address_components;         
          this.address = place.formatted_address
          this.city = this.retriveAddressComponents('locality');
          this.country = this.retriveAddressComponents('country');
          this.zipcode = this.retriveAddressComponents('postal_code');
          this.state = this.retriveAddressComponents('administrative_area_level_1');  
        })
      })
    });
  }

  retriveAddressComponents(type : string) {
    let res =  this.addressArray.find(address_components => address_components.types[0] === type);
    return res.long_name;
  }
...