Google地图信息窗口中的点击事件未被捕获

Question

使用Google Map v2，我希望能够在点击GMarker的InfoWindow中的文本时触发一个功能。

$(".foo").click(myFunction);

...

marker.openInfoWindowHtml("<span class=\"foo\">myText</span>");

不起作用。为什么事件没有被InfoWindow捕获？

Answer 1

我无法像Kevin Gorski解释的那样工作......

使用jquery 1.9.1并映射api v = 3.exp以下工作：

infowindow.setContent('<a href="#" id="test">test</a>');
google.maps.event.addDomListener(infowindow, 'domready', function() {
    $('#test').click(function() {
        alert("Hello World");
    });
});

Answer 2

如果在调用openInfoWindowHtml之前调用事件绑定调用，就像在您的示例中那样，当第一次调用查找具有类“foo”的元素时，跨度不在DOM中，因此没有附加处理程序

您可以移动该事件处理程序以在openInfoWindowHtml之后调用，或者使用“实时”事件绑定，以便jQuery将监视DOM以获取具有给定选择器的任何新元素。

$(".foo").live('click', myFunction);

Answer 3

据我所知，GMaps以编程方式将内容注入到InfoWindow中，因此除非您使用事件委托，否则注入元素上的任何绑定事件处理程序都不会触发：

$(".foo").live("click", myFunction);

请参阅live事件处理程序。

Answer 4

试试这个：

google.maps.event.addListener(infowindow,"**domready**",function() {
    var Cancel = document.getElementById("Cancel");
    var Ok = document.getElementById("Ok");

    google.maps.event.addDomListener(Cancel,"click",function() {
        infowindow.close();
    });

    google.maps.event.addDomListener(Ok,"click",function() {
        infowindow.close();
        console.log(position);
        codeLatLng(position);
    });
});

Answer 5

简单的解决方案并为我工作。在span中使用onclick事件。

<span class=\"foo\" onclick="test()">myText</span>

function test(){
alert('test OK');
}

Answer 6

最简单且完整描述的解决方案。

infoWindow 本身仅应包含具有唯一 id 的占位符div：

    <InfoWindow
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}
        onOpen={e => {
          this.onInfoWindowOpen(this.props, e);
        }}
      >
        <div id="xyz" />
      </InfoWindow>

在 Mapcontainer 中，定义一个onInfoWindowOpen回调，该回调将插入带有onClick事件的单个组件/容器，并将其呈现到占位符 div ：

    onInfoWindowOpen = () => {
        const button = (<button 
        onClick={
            () => {
            this.viewClinic(this.state.selectedPlace.slug)
            }
            }>
            View Details
        </button>);
        ReactDOM.render(React.Children.only(button),document.getElementById("xyz"));
        }

---

这是一个有效的示例：

https://codesandbox.io/s/k0xrxok983

---

另一个完整的示例 MAP ，标记和 InfoWindow ：

https://codesandbox.io/s/24m1yrr4mj

如有任何疑问，请发表评论。