Question

这是我的代码

addMarker(){
    var infowindow = new google.maps.InfoWindow({
        content: '<button (click)="showJob()">show job</button>' 
    });

    const myLatlng = new google.maps.LatLng(this.features[i].latitude, this.features[i].longitude);
    const Marker = new google.maps.Marker({
        position: myLatlng,
        icon: this.icons[this.features[i].type].icon,
        map: this.map,
        animation: google.maps.Animation.DROP,
        title: this.features[i].title
    });

    Marker.addListener('click', function() {
        infowindow.open(this.map, Marker);
    });

}


showJob(){
    alert("showJobs");

}

我想点击infowindow上的show job按钮调用方法showJob()，但它无效。

Answer 1

showJob事件在Angular2组件中定义，但信息窗口html不是组件模板的一部分，这就是无法触发showJob的原因。

在这种情况下，showJob事件可以绑定到信息窗口，如下所示：

google.maps.event.addListener(infowindow, 'domready', () => {
  const el = document.querySelector('button');
  el.addEventListener('click', (event) => this.showJob(event));
});

Plunker

从Google Map API InfoWindow调用Angular函数

1 个答案: