我可以将 Angular2（点击）添加到 Google 地图标记信息窗口吗？

Question

我在 Angular2 中实现了 Google 地图，没有使用任何可用的 npm 库，并且需要向 infoWindow 添加一个按钮来触发 Angular 函数。这个可以吗？？？。

到目前为止，我的最大努力没有奏效，airport.name 显示但 (click)="setAirport('departure', airport)" 没有。我认为它没有以任何方式连接到 Angular。

当用户点击激活标记和信息窗口时，我的组件具有以下功能。

showAirport(idx, 机场) { 常量标记信息 = <h4>${airport.name}</h4><div class='row' style='margin:0; margin-top:20px'> <div class="col-xs-6"> <a class="btn btn-primary btn-block" (click)="setAirport('departure',airport)">Set as Departure</a> </div> <div class="col-xs-6"> <a class="btn btn-primary btn-block" (click)="setAirport('arrival',airport)">Set as Arrival</a> </div> </div>
;

this.setCurrentAirport(idx);
this.infoWindow.setContent(markerInfo);
this.infoWindow.open(this.map, this.markers[idx]);

}

这里是更多的组件 ts 文件。

---

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { Response } from '@angular/http';

declare var google;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    @ViewChild('map') mapElement: ElementRef;

    map: any;
    infoWindow = new google.maps.InfoWindow();

    private allItems: any[];

    lat = 51.5287718;
    lng = -0.1;

    airports = [];
    markers = [];
    flights = [];
    polylines = [];

    bounds = {
      w: 0,
      e: 0,
      n: 0,
      s: 0
    };

    loadAirports(apiBounds) {
        this.airportsService.byBounds(apiBounds)
        .subscribe(
          (airportData: any[]) => {
              for (let i = 0; i < airportData['data'].length; i++) {
                  const tmpAirport = {
                      id: i,
                      airportID: airportData['data'][i].id,
                      name: airportData['data'][i].airportName,
                      lat: airportData['data'][i].lat,
                      lng: airportData['data'][i].lng
                  };
                  this.airports.push(tmpAirport);
                  this.addMarker(tmpAirport, tmpAirport['name'], i);
              }
          },
          (error: Response) => {
            const errorData = error.json();
          }
        );
    };

  showAirport(idx, airport) {
    console.log(airport);
    // this is where I want to be able to include the buttons 
    const markerInfo = `<h4>${airport.name}</h4>`;
    this.infoWindow.setContent(markerInfo);
    this.infoWindow.open(this.map, this.markers[idx]);
  }

  loadMap() {
    const latLng = new google.maps.LatLng(51, -0.5);
    const mapOptions = {
      center: latLng,
      scrollwheel: false,
      zoom: 9,
      minZoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    new google.maps.event.addListenerOnce(this.map, 'bounds_changed', () => {
        this.loadAirports(this.bounds);
    });
  }

  addMarker(airport, info, markerIndex) {
    const position = new google.maps.LatLng(airport['lat'], airport['lng']);
    const marker = new google.maps.Marker({
      map: this.map,
      position: position,
      markerIndex: markerIndex
    });
    const markerInfo = '<b>' + airport.name + '</b>';
    this.addInfoWindow(marker, markerInfo, markerIndex);
    this.markers.push(marker);
  }

  addInfoWindow(marker, content, markerIndex) {
    google.maps.event.addListener(marker, 'click', () => {
      this.infoWindow.setContent(content);
      this.infoWindow.open(this.map, marker);
    });
  }

  constructor() {}

  ngOnInit() {
    this.loadMap();
  }

}

Answer 1

不是最漂亮的解决方案，但您始终可以将 clases/ids 分配给 InfoWindow 内的按钮，然后绑定到它们：

showAirport(idx, airport) {
  console.log(airport);
  // this is where I want to be able to include the buttons 
  const markerInfo = `
    <h4>${airport.name}</h4>
    <a class="btn btn-primary btn-block" id="departure-button">Set as Departure</a>
  `;
  this.infoWindow.setContent(markerInfo);
  this.infoWindow.open(this.map, this.markers[idx]);

  const departureButton = this.mapElement.nativeElement.getElementById('departure-button');
  departureButton.onclick = this.setAirport('departure', airport);

  google.maps.event.addListener(this.infoWindow, 'closeclick', () => {
    departureButton.onclick = null;
  });
});

Answer 2

只需将这个分配给那个并使用它，

  addInfoWindow(marker, content, markerIndex) {
    let that = this;
    google.maps.event.addListener(marker, 'click', () => {
      that.infoWindow.setContent(content);
      that.infoWindow.open(this.map, marker);
    });
  }

太棒了;)。 this 的变量范围不是您需要的 this，所以它没有 infoWindow，但是通过将 this 分配给 that 现在我们有了 infowWindow。