谷歌地方自动填充+ Angular2

我建立一个简单的谷歌地方自动填充Angular2指令，但问题是不能得到任何预测（响应总是空的？！）...谷歌地方自动填充+ 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>

上面的代码工作 - 点击开始按钮后，我能得到的预测。

现在，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]）”）

此外，谷歌API控制台说一切都是理所应当的？下面是截图：

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

嗨Habeeb，我是新的角2 ..我想添加一个自动完成在我的网页.. 。当我搜索解决方案时，我发现这篇文章。当“this.autocomplete = new google.maps.places.Autocomplete（input，{}）;”这条线达到我得到一个错误，如“InvalidValueError：不是HTMLInputElement的一个实例”..你可以呃plz hlp我找出这个错误？ – Girija

@哈比布的回答是一个很好的开始，但是这是一个更清洁的实现。首先安装谷歌地图类型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

谷歌地方自动填充+ Angular2

回答

相关问题