GWT Google Maps V3覆蓋小部件

我使用的是GWT谷歌地圖V3 API，我需要在地圖上顯示自定義形狀。對於簡單的元素，我使用了Polygon，Circle和InfoWidnow類，但我想顯示其他一些小部件，如按鈕或自定義面板。有沒有辦法使用OverlayView類來做到這一點？我嘗試了一個簡單的解決方案：一個包含MapWidget和我的自定義小部件的AbsolutePanel，放在頂部，但我想盡可能多地使用gwt google maps類。我已閱讀文檔並尋找答案，但我無法弄清楚，所以代碼示例會很棒。 Thanx！GWT Google Maps V3覆蓋小部件

來源

2012-04-10 Andrei F

我發現我在這裏需要什麼（的JavaScript API第3版）： https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays

方法名和類非常相似，所以它不是那麼難找出GWT類應該如何使用（如OverlayView的）。

這裏是呈現在地圖上的自定義部件（包括SVG元素和動畫）的例子：

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; 
    } 

}

來源

2012-07-25 17:24:30

只需使用標準的GWT API和您的地圖V3 API。它們將互連良好。

來源

2012-04-10 10:22:21 GingerHead

我已經試過了，它是確定（使用GWT的小部件），但我想作爲使用許多類，因爲我可以從gwt谷歌地圖api（我覺得它更像是OverlayView類）。如果你能提供一個例子或某個地方的鏈接會很棒。 – 2012-04-10 11:17:04

男人只是鏈接你的日食中的兩個罐子，並使用他們兩個 – GingerHead 2012-04-10 11:21:33

我不是這個意思，我的意思是一個代碼示例，使用OverlayView在地圖上添加自定義小部件，如果可能的話 – 2012-04-10 11:57:20

GWT Google Maps V3覆蓋小部件

回答

相關問題