未捕获 Google Map InfoWindow 中的单击事件答案

【问题标题】：Click event in Google Map InfoWindow not caught未捕获 Google Map InfoWindow 中的单击事件
【发布时间】：2010-02-07 15:38:15
【问题描述】：

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

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

...

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

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

【问题讨论】：

标签： javascript google-maps mouseclick-event infowindow

【解决方案1】：

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

使用 jquery 1.9.1 和 maps 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");
    });
});

【讨论】：

【解决方案2】：

如果在调用 openInfoWindowHtml 之前调用事件绑定调用，就像在您的示例中一样，则 span 不在 DOM 中，而第一次调用正在寻找具有类“foo”的元素，因此没有附加处理程序.

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

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

【讨论】：

谢谢凯文，这行得通。我需要在jquery mobile内部#link上放置一个点击事件，并且内部页面似乎在事件触发之前加载？只是需要注意的事情。

【解决方案3】：

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

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

查看live 事件处理程序。

【讨论】：

【解决方案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);
    });
});

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案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、Marker和InfoWindow：

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

如果您有任何问题，请发表评论。

【讨论】：