如何在Angular2中使用gMaps？那可能吗？

Question

我需要为城市等创建先行服务。 同时我需要使用typeahead指令（ng2-bootstrap），所以我只需要一个字符串数组，我将通过我的服务给出。

我决定使用谷歌地图。

此代码取自google maps api

的示例

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
  /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
  {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

我需要将它与Angular2一起使用......我该怎么做？有可能吗？

提前谢谢，祝你好运！

Answer 1

我会从与您的事件相关联的回调中设置一个对象。这是一个示例：

autocomplete.addListener('place_changed', () => {
  this.selectedPlace = autocomplete.getPlace();
});

并将表单绑定到此对象

<form>
  Name: <input [(ngModel)]="selectedPlace.name"/>
  (...)
</form>

修改

您需要引用要应用于ViewChild装饰器的元素：

<div #autocomplete></div>

并在组件中：

@ViewChild('autocomplete')
autocompleteElt:ElementRef;

ngAfterViewInit() {
  this.initAutocomplete();
}

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