如何从Google Map的信息窗口中调用Angular2函数? [英] How could I call a Angular2 function from a Google Map infowindow?

问题描述

Google Map是通过javascript方式集成的，我想在信息窗口中调用angular2函数，如以下代码所示.看看按钮的infoContent.

Google map is integrated the javascript way and I want to call a angular2 function inside an infowindow like the following code. Take a look at infoContent for the button.

for (i = 0; i < locations.length; i++) {

  let locLatLng = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
  let infoContent = '<button (click)="myFunction(' + locations[i].id + ')">Details ...</button>';

  marker = new google.maps.Marker({
    position: locLatLng,
    map: this.map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(infoContent);
      infowindow.open(this.map, marker);
    };
  })(marker, i));

}

不幸的是，角度单击事件(click)="myFunction()"无法做到.一定有其他方法.如果有人能指出我正确的方向，我将感到非常高兴.预先感谢.

Unfortunately the angular click event (click)="myFunction()" can't do it. There must be an other way. I would be very pleased if someone can point me to the right direction. Thanks in advance.

推荐答案

更新(根据评论)

您可以使用ElementRef和Renderer进行操作，但这不是问题.问题是获取按钮的引用(直接DOM元素引用或ElementRef).您可以注入private elRef:ElementRef并使用this.elRef.nativeElement.querySelector('infowindow button')或类似的方法，但是如果您访问elRef.nativeElement，您将再次脱离平台中立的领域，因为不应直接访问nativeElement，但要受Renderer的限制只能调用方法但永远不会得到结果的回报，您只能做很多事情.

You can do it with ElementRef and Renderer but that is not the problem. The problem is to get a reference (direct DOM element reference or ElementRef) of the button. You can inject private elRef:ElementRef and use this.elRef.nativeElement.querySelector('infowindow button') or similar but if you access elRef.nativeElement you're out of the realm of platform neutrality again because nativeElement should not be accessed directly, but with the limitation of the Renderer of only being able to call methods but never to get a result in return, there is only so much you can do.

我将使用

I would use a method like shown in Trigger event with infoWindow or InfoBox on click Google Map API V3 and then check the event.target if an element you are interested in was clicked.

原始

如果要在事件处理程序中访问this.map，则应改用箭头功能

If you want to access this.map in the event handler you should use arrow functions instead

  google.maps.event.addListener(marker, 'click', ((marker, i) => { // <<<===
    return () => { // <<<===
      infowindow.setContent(infoContent);
      infowindow.open(this.map, marker);
    };
  })(marker, i)

否则this.不会指向当前的类实例

otherwise this. won't point to the current class instance

这篇关于如何从Google Map的信息窗口中调用Angular2函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！