GWT - v3谷歌地图infowindow

Question

里面的按钮我想弄清楚如何在谷歌地图InfoWindow内传播组件的事件。 我创建了一个锚或一个按钮，并希望处理其中任何一个点击事件。

我已经找到了解决方案描述here 和 here

，但这些都被使用谷歌地图的包装为GWT。 我想避免这些库。

问题：

你知道有什么办法，我怎么可以从传播信息窗口，这些事件给它包装谷歌地图的一些GWT面板？答：

Answer 1

基于代码在这里找到： http://gwt-maps3.googlecode.com/svn/trunk/src/com/googlecode/maps3/client/

我创造了这个类，与不使用外部库来解决问题（你要只有InfoWindowJSO从给定链路源） 然后强似的innerHTML为字符串setContent ...你只需传递Widget元素。

import com.google.gwt.core.client.JavaScriptObject; 
import com.google.gwt.dom.client.Element; 
import com.google.gwt.user.client.ui.ComplexPanel; 
import com.google.gwt.user.client.ui.Widget; 

public class InfoWindow 
{ 
     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); 
       } 
     } 

     /** */ 
     InfoWindowJSO jso; 

     /** If we have a widget, this will exist so we can detach later */ 
     FakePanel widgetAttacher; 

     /** Keep track of this so we can get it again later */ 
     Widget widgetContent; 

     /** */ 
     public InfoWindow() 
     { 
       this.jso = InfoWindowJSO.newInstance(); 
     } 

     /** */ 
     public InfoWindow(InfoWindowOptions opts) 
     { 
       this.jso = InfoWindowJSO.newInstance(opts); 
     } 

     /** Detaches the handler and closes */ 
     public void close() 
     { 
       this.detachWidget(); 
       this.jso.close(); 
     } 

     /** Detaches the content widget, if it exists */ 
     private void detachWidget() 
     { 
       if (this.widgetAttacher != null) 
       { 
         this.widgetAttacher.detachWidget(); 
         this.widgetAttacher = null; 
       } 
     } 

     /** */ 
     public void open(JavaScriptObject map) 
     { 
       this.jso.open(map); 
     } 

     public void open(JavaScriptObject map, JavaScriptObject marker) 
     { 
       this.jso.open(map, marker); 
     } 

     /** */ 
     public void setOptions(InfoWindowOptions value) 
     { 
       this.jso.setOptions(value); 
     } 

     /** */ 
     public void setContent(String value) 
     { 
       this.widgetContent = null; 
       this.detachWidget(); 
       this.jso.setContent(value); 
     } 

     /** */ 
     public void setContent(Element value) 
     { 
       this.widgetContent = null; 
       this.detachWidget(); 
       this.jso.setContent(value); 
     } 

     /** */ 
     public void setContent(Widget value) 
     { 
       this.widgetContent = value; 
       this.detachWidget(); 
       this.jso.setContent(value.getElement()); 

       if (this.widgetAttacher == null) 
       { 
         // Add a hook for the close button click 
         this.jso.addListener("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); 
       } 
     } 

     /** @return the widget, if a widget was set */ 
     public Widget getContentWidget() 
     { 
       return this.widgetContent; 
     } 

     /** */ 
     public JavaScriptObject getPosition() 
     { 
       return this.jso.getPosition(); 
     } 

     /** */ 
     public void setPosition(JavaScriptObject value) 
     { 
       this.jso.setPosition(value); 
     } 

     /** */ 
     public int getZIndex() 
     { 
       return this.jso.getZIndex(); 
     } 

     /** */ 
     public void setZIndex(int value) 
     { 
       this.jso.setZIndex(value); 
     } 

     /** */ 
     public void addListener(String whichEvent, Runnable handler) 
     { 
       this.jso.addListener(whichEvent, handler); 
     } 
} 

Answer 2

A.浏览器事件一直冒泡到DOM树顶部。您可以将点击处理程序附加到InfoWindow和widget的父级控件。然后，当用户点击你的按钮时，你需要检查事件的来源，以确保它来自你的按钮。

public void onClick(final ClickEvent event) {  
    Element e = Element.as(event.getNativeEvent().getEventTarget()); 
    // check if e is your button 
} 

B.您可以创建一个常规的GWT按钮，将一个ClickHandler附加到它。不要把它放在InfoWindow中：使用绝对定位和更高的Z-index将它放在最上面。

Answer 3

一个非常简单的解决方案是使用gwtquery：

标识在地图上的锚要添加单击处理程序，并定义一个CSS选择器（例如ID = my_link）

使用gquery查找它并添加事件。

$('#my_link').click(new Function() { 
    public boolean f(Event e) { 
    [...] 
    return false; //false means stop propagation and prevent default 
    } 
}); 

注意gwtquery不是jQuery的一个包装，但其API的整个GWT实现，所以包括在您的项目不会过载它，编译器会拿起刚才你用的东西。

Answer 4

我使用静态值nextAnchorId来为每个InfoWindow唯一地生成ID，并且当InfoWindow准备就绪时（通常当您调用infoWindow.open（map）;）时，我通过元素ID获取锚点并添加我的Click处理程序到它。这就是Manolo正在做的事情，但是这个实现并不需要gwtquery，这意味着我可以在超级开发模式下运行我的代码。

private static int nextAnchorId = 1; 

public InfoWindow makeInfo() { 
    InfoWindowOptions infoWindowOptions = InfoWindowOptions.create(); 
    FlowPanel infoContentWidget = new FlowPanel(); 
    final String theAnchorId_str = "theAnchor" + nextAnchorId; 
    HTML theAnchor = new HTML("<a id=\"" + theAnchorId_str + "\">Click me!</a>"); 
    infoContentWidget.add(theAnchor); 
    infoWindowOptions.setContent(infoContentWidget.getElement()); 
    InfoWindow infoWindow = InfoWindow.create(infoWindowOptions); 

    infoWindow.addDomReadyListenerOnce(new InfoWindow.DomReadyHandler() { 
     @Override 
     public void handle() { 
      com.google.gwt.user.client.Element muffinButton = (com.google.gwt.user.client.Element) Document.get().getElementById(theAnchorId_str); 
      DOM.sinkEvents(muffinButton, Event.ONCLICK); 
      DOM.setEventListener(muffinButton, new EventListener() { 
       @Override 
       public void onBrowserEvent(Event event) { 
        Window.alert("You clicked on the anchor!"); 
        // This is where your click handling for the link goes. 
       } 
      }); 
     } 
    }); 

    nextAnchorId++; 
    return infoWindow 
}