[英]Google Maps InfoWindow - (click) trigger an Angular 2 function
I have a component that leverages google maps in an Angular 2+ app.我有一个在 Angular 2+ 应用程序中利用谷歌地图的组件。 Is there a decent way to get a link into a marker's infowindow that will trigger a method in my component?是否有一种体面的方法可以将链接添加到标记的信息窗口中,以触发我的组件中的方法? The (click)
below is the trouble spot.下面的(click)
是故障点。 I can swap to onclick
if I want to mess with making a global method (hoping to avoid that).如果我想弄乱创建全局方法(希望避免这种情况),我可以切换到onclick
。
//Add directions if we have a current location
let additionalContent = "";
if(this.positionMarker){
additionalContent = `<br><a href='#' (click)='startNavigating(${marker.position.lat()}, ${marker.position.lng()})'>Directions</a>`;
}
let infoWindow = new google.maps.InfoWindow({
content: content + additionalContent
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
Found a few pieces to make this work without crazy angular overhead.找到了几件作品来完成这项工作,而没有疯狂的角度开销。 The keys were to:关键是:
domready
), add a click listener to the anchor's id that was clicked当 infoWindow 打开 ( domready
) 时,向被点击的锚点的 id 添加一个点击监听器Code below:代码如下:
//Add directions if we have a current location
let additionalContent = "";
if (this.positionMarker) {
additionalContent = `<br><a href='#' id='marker_${markerId}'>Directions</a>`;
}
//Add the marker listener to open the infowindow
google.maps.event.addListener(marker, 'click', () => {
this.infoWindow.setContent(content + additionalContent);
this.infoWindow.open(this.map, marker);
//Once infow window is open, add a click listener based on the ID in the anchor tag
if (additionalContent) {
google.maps.event.addListenerOnce(this.infoWindow, 'domready', () => {
document.getElementById(`marker_${markerId}`).addEventListener('click', () => {
this.startNavigating(marker.position.lat(), marker.position.lng());
});
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.