Загрузка Google Места Автозаполнение Async Angular 2

Я пытаюсь создать экземпляр ввода автозаполнения в Google Адресах в компоненте Angular 2. Я использую этот код, чтобы сделать это:Загрузка Google Места Автозаполнение Async Angular 2

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

Обычно, я считаю, я хотел бы использовать функцию обратного вызова, предоставленную API Google, чтобы убедиться, что он будет загружен до запуска этой функции, но у меня нет доступа к нему в пределах области действия компонента. Я могу загрузить автозавершения ввода 90% времени, а на медленных соединениях я иногда ошибка с

google is not defined

Кто-нибудь понял, как обеспечить API Google загружается в компонент перед тем инстанцировании.

источник

2016-05-19 C. Kearns

Hello C. Kearns, Какую библиотеку api вы используете для карт Google в угловом 2? –

Google помещает автозаполнение. Проблема сохранилась и еще предстоит найти адекватное решение. –

Я использовал его таким же образом, как описано выше, но на скорости страницы Google я получаю это предложение,

Remove рендер-блокирующие JavaScript : http://maps.googleapis.com/ ... эс = геометрия, места & области = В & языке = еп

Таким образом, я изменил мою реализацию,

<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 внутри них.

источник

2016-11-03 11:25:16 Manish

Не уверен, поможет ли это, но я просто использую простой тег script в своем index.html для загрузки Google API, и я никогда не получаю никаких ошибок. Я считаю, что вы делаете то же самое. Я размещаю свои коды здесь, надеюсь, что это поможет.

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

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

источник

2016-05-19 09:21:29 Andyccs

У меня есть свой тег для скрипта под приложением, возможно, это проблема! –

Привет @Andyccs, спасибо за ваш ответ, но мне интересно, что произойдет, если мы будем использовать более одного поля для ввода? Будет ли он работать нормально? –

Загрузка Google Места Автозаполнение Async Angular 2

ответ

Смежные вопросы