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

}