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

Question

使用 Google Map v2，我希望能够在单击 GMarker 信息窗口中的文本时触发功能。

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

...

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

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

Answer 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");
    });
});

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< /strong>，您定义一个 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"));
        }

---

这是一个工作示例：

< a href="https://codesandbox.io/s/k0xrxok983" rel="nofollow noreferrer">https://codesandbox.io/s/k0xrxok983

---

一个更完整的示例MAP 、标记和信息窗口：

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

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