GWT Google Maps V3 Overlay Widgets

Question

Ich benutze die GWT Google Maps V3 API und ich muss benutzerdefinierte Formen über die Karte anzeigen. Für einfache Elemente habe ich Polygon-, Circle- und InfoWidnow-Klassen verwendet, aber ich möchte einige andere Widgets wie Schaltflächen oder benutzerdefinierte Panels anzeigen. Gibt es eine Möglichkeit, dies mit der OverlayView-Klasse zu tun? Ich habe eine einfache Lösung ausprobiert: ein AbsolutePanel, das das MapWidget und meine benutzerdefinierten Widgets enthält, aber ich möchte die gwt google maps-Klassen so oft wie möglich verwenden. Ich habe die Dokumentation gelesen und nach einer Antwort gesucht, aber ich konnte es nicht herausfinden, also wäre ein Codebeispiel großartig. Danke!

Answer 1

fand ich, was ich hier gebraucht (JavaScript v3 api): https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays

die Methodennamen und Klassen sind sehr ähnlich, so dass es nicht so schwierig ist, wie sollten die GWT-Klassen verwendet werden, um herauszufinden, (wie Überlagerungsansicht). Hier

ist ein Beispiel mit benutzerdefinierten Widgets (mit SVG-Elemente und Animationen) auf der Karte wiedergegeben:

private class TargettingOverlay extends OverlayView { 

    protected Element div ; 
    protected PanelWrapper panelWrapper; 
    private TargettingEffect targetEffect; 

    TargettingOverlay(){ 
     targetEffect = new TargettingEffect(); 
     targetEffect.setLinedDimension(10500); 
     targetEffect.setLinesOffset(-5000); 
    } 

    void positionTarget(LatLng loc, boolean withoutLines){ 
     if (targetEffect == null) 
      return; 

     if (loc == null) { 
      targetEffect.setElementsVisible(false); 
      return; 
     } 
     targetEffect.setElementsVisible(true); 


     Point p = null; 
     Point sw = null; 
     Point ne = null; 
     LatLng locSW = (LatLng)this.getMap().getBounds().getSouthWest(); 
     LatLng locNE = (LatLng)this.getMap().getBounds().getNorthEast(); 

     // 
     p = (Point)getProjection().fromLatLngToDivPixel(loc); 
     sw = (Point)getProjection().fromLatLngToDivPixel(locSW); 
     ne = (Point)getProjection().fromLatLngToDivPixel(locNE); 



     targetEffect.setWithoutLinles(withoutLines); 
     targetEffect.target((int)ne.getY(), (int)p.getY(), (int)sw.getX(), (int)p.getX()); 
    } 

    @Override 
    public void draw() { 
     Point ne = (Point)getProjection().fromLatLngToDivPixel((LatLng) 
       this.getMap().getBounds().getNorthEast()); 
     Point sw = (Point)getProjection().fromLatLngToDivPixel((LatLng) 
       this.getMap().getBounds().getSouthWest()); 


     div.getStyle().setTop(ne.getY(), Unit.PX); 
     div.getStyle().setLeft(sw.getX(), Unit.PX); 
    } 

    @Override 
    public void onAdd() { 
     div = DOM.createDiv(); 

     getPanes().getOverlayLayer().appendChild(div); 

     panelWrapper = new PanelWrapper(div); 
     panelWrapper.attach();   

     targetEffect.setContainer(panelWrapper); 
    } 

    @Override 
    public void onRemove() { 
     div.removeFromParent(); 
     panelWrapper.removeFromParent(); 

     div = null; 
     panelWrapper = null; 
    } 

} 

Answer 2

Verwenden Sie einfach die Standard-GWT-API zusammen mit Ihrer Karten-V3-API. Sie werden sich gut miteinander verbinden.