10

Google Map v2では、GMarkerの情報ウィンドウでテキストをクリックしたときに関数をトリガーできるようにしたいと思います。

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

...

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

動作しません。イベントがインフォウィンドウ内でキャッチされないのはなぜですか？

4

6 に答える 6

11

KevinGorskiが説明したように動作させることができませんでした...

jquery1.9.1およびmapsapiv = 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の呼び出しの前にイベントバインディング呼び出しが呼び出された場合、最初の呼び出しがクラス「foo」の要素を探していたときにスパンがDOMになかったため、ハンドラーはアタッチされませんでした。

そのイベントハンドラーをopenInfoWindowHtmlの後に呼び出されるように移動するか、「ライブ」イベントバインディングを使用して、jQueryが指定されたセレクターで新しい要素についてDOMを監視するようにすることができます。

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

私の知る限り、GMapsはプログラムでコンテンツをインフォウィンドウに挿入するため、イベント委任を使用しない限り、挿入された要素のバインドされたイベントハンドラーは起動しません。

$(".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

簡単な解決策と私のために働きます。スパンで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

もう1つの完全な例MAP、マーカー、およびインフォウィンドウ：

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

ご不明な点がございましたらコメントください。

于 2020-04-03T09:42:26.350 に答える