Google Maps API v3 - InfoWindow 内的按钮和文本框? [英] Google Maps API v3 - Buttons and TextBoxes inside InfoWindow?

问题描述

我正在使用来自 gwt-google-apis.

是否可以从 InfoWindow 内的 GWT 小部件捕获事件?我错过了什么吗?

尝试了上面的代码(button.addClickHandler)，但没有显示警报:

 标记 m = Marker.create();m.setIcon(MarkerImage.create(icon));m.setPosition(LatLng.create(posicao.lat(), posicao.lng()));m.setMap(地图);m.addClickHandler(new ClickHandler() {@覆盖公共无效句柄(鼠标事件事件){InfoWindow 信息 = InfoWindow.create();Button button = new Button("Desativar");button.addClickHandler(new com.google.gwt.event.dom.client.ClickHandler() {@覆盖public void onClick(ClickEvent 事件) {Window.alert("点击");}});final HTMLPanel html = new HTMLPanel(("
"));html.add(button, "button");info.setContent(html.getElement());info.setPosition(posicao);信息.打开(地图)；}});

谢谢.

解决方案

我必须在 InfoWindow 上构建一个包装器才能使其工作.

公共类 NXInfoWindow {静态类 FakePanel 扩展 ComplexPanel {公共 FakePanel(Widget w) {w.removeFromParent();getChildren().add(w);采用(w)；}@覆盖公共布尔 isAttached() {返回真；}公共无效分离小部件(){this.remove(0);}}私人信息窗口信息；私有 IsWidget widgetContent = null;私人长ID；FakePanel widgetAttacher;公共静态 NXInfoWindow 创建(长 ID){NXInfoWindow myInfo = new NXInfoWindow();myInfo.info = InfoWindow.create();myInfo.id = id;返回我的信息；};私有无效分离小部件(){如果 (this.widgetAttacher != null) {this.widgetAttacher.detachWidget();this.widgetAttacher = null;}}公共无效关闭(){info.close();分离小部件()；}公共无效 setPosition(LatLng posicao) {info.setPosition(posicao);}public void open(谷歌地图){信息.打开(地图)；}公共无效setContent(小部件值){this.widgetContent = 值；info.setContent(value.getElement());如果(this.widgetAttacher == null){addListener(信息，closeclick"，新的 Runnable(){@覆盖公共无效运行(){分离小部件()；}});this.widgetAttacher = new FakePanel(value);} else if (this.widgetAttacher.getWidget(0) != value) {this.widgetAttacher.detachWidget();this.widgetAttacher = new FakePanel(value);}}私有无效 setContent(元素元素){this.setContent(元素);}公共 IsWidget getContentWidget() {返回小部件内容；}public final native void addListener(JavaScriptObject jso, String whichEvent, Runnable handler)/*-{var that = jso;$wnd.google.maps.event.addListener(jso, whichEvent, function() {[e-mail]::run()();});}-*/;}

I'm using the new maps v3 API from gwt-google-apis.

Is it possible to capture events from GWT widgets that are inside InfoWindow? Am I missing something?

Tried code above (button.addClickHandler) and it doesn't show the alert:

    Marker m = Marker.create();
    m.setIcon(MarkerImage.create(icone));
    m.setPosition(LatLng.create(posicao.lat(), posicao.lng()));
    m.setMap(map);

    m.addClickHandler(new ClickHandler() {

        @Override
        public void handle(MouseEvent event) {

            InfoWindow info = InfoWindow.create();

            Button button = new Button("Desativar");
            button.addClickHandler(new com.google.gwt.event.dom.client.ClickHandler() {

                @Override
                public void onClick(ClickEvent event) {
                    Window.alert("click");

                }
            });

            final HTMLPanel html = new HTMLPanel(("<div id='button'></div>"));
            html.add(button, "button");

            info.setContent(html.getElement());
            info.setPosition(posicao);
            info.open(map);

        }
    });

Thanks.

解决方案

I had to build a wrapper over InfoWindow to make it work.

public class NXInfoWindow {

    static class FakePanel extends ComplexPanel {
        public FakePanel(Widget w) {
            w.removeFromParent();
            getChildren().add(w);
            adopt(w);
        }

        @Override
        public boolean isAttached() {
            return true;
        }

        public void detachWidget() {
            this.remove(0);
        }
    }

    private InfoWindow info;

    private IsWidget widgetContent = null;

    private Long id;

    FakePanel widgetAttacher;

    public static NXInfoWindow create(Long id){
        NXInfoWindow myInfo = new NXInfoWindow();
        myInfo.info = InfoWindow.create(); 
        myInfo.id = id;
        return myInfo;
    };

    private void detachWidget() {
        if (this.widgetAttacher != null) {
            this.widgetAttacher.detachWidget();
            this.widgetAttacher = null;
        }
    }

    public void close() {
        info.close();
        detachWidget();
    }

    public void setPosition(LatLng posicao) {
        info.setPosition(posicao);
    }

    public void open(GoogleMap map) {
        info.open(map);
    }

    public void setContent(Widget value) {
        this.widgetContent = value;
        info.setContent(value.getElement());

        if (this.widgetAttacher == null) {
            addListener(info, "closeclick", new Runnable() {
                @Override
                public void run() {
                    detachWidget();
                }
            });
            this.widgetAttacher = new FakePanel(value);
        } else if (this.widgetAttacher.getWidget(0) != value) {
            this.widgetAttacher.detachWidget();
            this.widgetAttacher = new FakePanel(value);
        }
    }

    private void setContent(Element element) {
        this.setContent(element);
    }

    public IsWidget getContentWidget() {
        return widgetContent;
    }

    public final native void addListener(JavaScriptObject jso, String whichEvent, Runnable handler)
    /*-{
        var that = jso;
        $wnd.google.maps.event.addListener(jso, whichEvent, function() {
          [e-mail]::run()();
        });
      }-*/;
}

这篇关于Google Maps API v3 - InfoWindow 内的按钮和文本框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！