Angular 2使用ngUI贴图

Question

下面是我尝试过的一些方法

这是我的代码：

<ngui-map center="Brampton, Canada">
    <marker position="Brampton, Canada" 
      draggable="true" 
      (click)="clicked($event)">
    </marker>
    <info-window id="iw">
      lat: [[lat]], lng: [[lng]]
    </info-window>
  </ngui-map>

import { Component } from '@angular/core';
import { NguiMapComponent } from '@ngui/map';
  @Component({
    template: require('./app.html')
  })
  class AppCompoment {
    clicked(event) {
      let marker = event.target;
      marker.ng2MapComponent.openInfoWindow('iw', marker, {
        lat: marker.getPosition().lat(), 
        lng: marker.getPosition().lng(),
      });
    }

我得到了这个错误：

Cannot read property 'openInfoWindow' of undefined

我如何解决这个问题。

请多多指教。

谢谢

Answer 1

尝试使用@ViewChild访问子组件。

<ngui-map center="Brampton, Canada">
    <marker #mrker position="Brampton, Canada" 
      draggable="true" 
      (click)="clicked($event)"><!-- set id -->
    </marker>
    <info-window id="iw">
      lat: [[lat]], lng: [[lng]]
    </info-window>
  </ngui-map>

组件类：

import { Component,ViewChild } from '@angular/core';
import { NguiMapComponent } from '@ngui/map';
  @Component({
    template: require('./app.html')
  })
  class AppCompoment {
   @ViewChild(NguiMapComponent)
   ngMap:NguiMapComponent;

   //@ViewChild('mrker')
   //marker:any;

    clicked(event) {
      let marker = event.target;
      this.ngMap.openInfoWindow('iw', marker, {
        lat: marker.getPosition().lat(), 
        lng: marker.getPosition().lng(),
      });
    }

Answer 2

<ngui-map zoom="14" [center]="center"  (mapClick)="onMapClick($event)">
  <marker *ngFor="let pos of positions"
          [position]="pos" (click)="clickedMarker($event)" ></marker>
  <info-window id="iw">
    <div *ngIf="infoposition">

      lat: {{ position.coords.latitude }}, lng: {{ position.coords.longitude }}
    </div>

  </info-window>


</ngui-map>




 clickedMarker(event:any) {
let marker = event.target;
let lat = marker.getPosition().lat();
let lng= marker.getPosition().lng();
marker.nguiMapComponent.openInfoWindow('iw', marker);

}