GWT 谷歌地圖 V3 覆蓋小部件

Question

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

Answer 1

只需將標准 GWT API 與您的地圖 V3 API 一起使用。它們將相互連接得很好。

Answer 2

我在這里找到了我需要的東西（javascript v3 api）： https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays

方法名稱和類非常相似，因此不難弄清楚應該如何使用 GWT 類（如 OverlayView）。

這是一個在 map 上呈現的自定義小部件（包含 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;
    }

}