10

With Google Map v2, I would like to be able to trigger a function when clicking a text in the InfoWindow of a GMarker.

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

...

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

does not work. Why the event isn't caught inside the InfoWindow ?

4

6 回答 6

11

我无法像 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");
    });
});
于 2013-05-16T08:11:37.007 回答
10

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

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

$(".foo").live('click', myFunction);
于 2010-02-07T15:55:16.623 回答
3

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

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

请参阅live事件处理程序。

于 2010-02-07T15:53:41.260 回答
0

尝试这个：

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);
    });
});
于 2013-04-15T02:15:58.887 回答
0

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

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

function test(){
alert('test OK');
}
于 2014-07-09T05:25:37.573 回答
0

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

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

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

于 2020-04-03T09:42:26.350 回答