Google地方信息自动填充+ Angular2

Stedjan

我正在构建一个简单的Google Places Autocomplete 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>

我的指令：

从“ @ angular / core”导入{指令，ElementRef，输入}；

声明var google：any; 

@Directive（{选择器：'[googleplaces]'}）
导出类GooglePlacesDirective { 

    autocomplete：any; 

    constructor（private el：ElementRef）{ 

    } 

    ngAfterContentInit（）{ 
        this.autocomplete =新的google.maps.places.Autocomplete（
            （this.el.nativeElement），
            {类型：['geocode'，' city ']}））; 
    } 
}

和简单的Angular组件：

<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控制台会说一切都应该保持原样？！这是屏幕截图：

仪表板截图

这里可能有什么问题？谢谢...

哈比卜

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)">

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。