Google автозаполнения Адресов + Angular2

Я строю простой директивы Google автозаполнения Адресов Angular2, но проблема в том, что не может получить какие-либо предсказания (ответ всегда пусто?!) ...Google автозаполнения Адресов + Angular2

Как доказательство концепции я создал простейший возможный фрагмент кода в качестве ссылки:

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&libraries=places" async defer></script> 
</head> 

<body> 
    <button type="button" onclick="go()">go</button> 
    <input id="autocomplete" type="text"></input> 
    <script> 
    var autocomplete = null; 

    function go() { 
     autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('autocomplete')), { 
       types: ['geocode'] 
      }); 
    } 
    </script> 
</body> 

</html>

Приведенный выше код работает - я могу получить прогнозы после нажатия кнопки Go.

Теперь Angular2 сценарий:

Мой _Layout.cshtml файл имеет следующий тег в головной секции:

<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&libraries=places" async defer></script>

Моя директива:

 
import { Directive, ElementRef, Input } from '@angular/core'; 

declare var google: any; 

@Directive({ selector: '[googleplaces]' }) 
export class GooglePlacesDirective { 

    autocomplete: any; 

    constructor(private el: ElementRef) { 

    } 

    ngAfterContentInit() { 
     this.autocomplete = new google.maps.places.Autocomplete(
      (this.el.nativeElement), 
      { types: ['geocode', 'cities'] }); 
    } 
}

И просто Угловая компонент:

<form [formGroup]="companyForm"> 

    . 
    . 
    . 

    <div class="form-group"> 
     <label for="Location">Location</label> 
     <input type="text" 
       class="form-control" 
       id="Location" 
       fromControlName="Location" 
       googleplaces> 
    </div> 
</form>

Сценарий 2 (угловой) не работает. Факты:

автозаполнение инициализируется (это все ожидаемые свойства/методы, заполнитель «Введите местоположение», и т.д ...)
автозаполнения не возвращает никакого предсказания для поиска типизированных строк (это возвращает только "/ **/XDc ._le3zv3 & & XDc ._le3zv3 ([4])")

Кроме того, Google API Console говорит, что все так и должно быть ?! Вот скриншот:

enter image description here

Что может быть вопрос здесь? Спасибо ...

источник

2017-02-20 stedejan

import {Directive, ElementRef, EventEmitter, Output} from '@angular/core'; 
import {NgModel} from '@angular/forms'; 

declare var google:any; 

@Directive({ 
    selector: '[Googleplace]', 
    providers: [NgModel], 
    host: { 
    '(input)' : 'onInputChange()' 
    } 
}) 
export class GoogleplaceDirective { 

    @Output() setAddress: EventEmitter<any> = new EventEmitter(); 
    modelValue:any; 
    autocomplete:any; 
    private _el:HTMLElement; 


    constructor(el: ElementRef,private model:NgModel) { 
    this._el = el.nativeElement; 
    this.modelValue = this.model; 
    var input = this._el; 

    this.autocomplete = new google.maps.places.Autocomplete(input, {}); 
    google.maps.event.addListener(this.autocomplete, 'place_changed',()=> { 
     var place = this.autocomplete.getPlace(); 
     this.invokeEvent(place); 

    }); 
    } 

    invokeEvent(place:Object) { 
    this.setAddress.emit(place); 
    } 

    onInputChange() { 
    console.log(this.model); 
    } 
}

Чтобы использовать

<input type="text" class="form-control" placeholder="Location" name="Location" [(ngModel)]="address" #LocationCtrl="ngModel" 
     Googleplace (setAddress)="getAddressOnChange($event,LocationCtrl)">

источник

2017-02-20 10:27:07 Habeeb

Отлично! Большое спасибо @Habeeb! – stedejan

Если вы ожидаете результата. Пожалуйста, отметьте правильный ответ. http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – Habeeb

Привет Хабиб, я новичок в угловой 2 .. Я пытаюсь добавить автозаполнение на моей странице .. Когда я ищу решение, я нашел это сообщение. Когда «this.autocomplete = new google.maps.places.Autocomplete (input, {});» эта линия досягаемости. Я получаю сообщение об ошибке «InvalidValueError: не экземпляр HTMLInputElement». Может ли PLZ hlp мне выяснить эту ошибку ??? – Girija

@ ответ Хабиб является отличным началом, но это уборщик реализация. Сначала установите значки googlemaps npm install --save-dev @types/googlemaps и импортируйте их где-нибудь в свое приложение import {} from '@types/googlemaps'.

import { Directive, ElementRef, EventEmitter, OnInit, Output } from '@angular/core'; 

@Directive({ 
    // xx is your app's prefix 
    selector: '[xxPlaceLookup]' 
}) 
export class PlaceLookupDirective implements OnInit { 
    @Output() onSelect: EventEmitter<any> = new EventEmitter(); 

    private element: HTMLInputElement; 

    constructor(el: ElementRef) { 
    this.element = el.nativeElement; 
    } 

    ngOnInit() { 
    const autocomplete = new google.maps.places.Autocomplete(this.element, { 
     types: ['establishment'], 
     componentRestrictions: {country: 'us'} 
    }); 
    google.maps.event.addListener(autocomplete, 'place_changed',() => { 
     const place = autocomplete.getPlace(); 
     this.onSelect.emit(place); 
    }); 
    } 
}

источник

2017-06-22 21:55:13 alalonde

Спасибо @alalonde, вы правы. – stedejan

спасибо, что это мне очень помогло –

Чистое воплощение. – Habeeb

Google автозаполнения Адресов + Angular2

ответ

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