GWT Google Maps V3 叠加小部件答案

【问题标题】：GWT Google Maps V3 overlay widgetsGWT Google Maps V3 叠加小部件
【发布时间】：2012-04-22 14:28:10
【问题描述】：

我正在使用 GWT google maps V3 API，我需要在地图上显示自定义形状。对于简单的元素，我使用了 Polygon、Circle 和 InfoWidnow 类，但我想显示其他一些小部件，如按钮或自定义面板。有没有办法使用 OverlayView 类来做到这一点？我尝试了一个简单的解决方案：一个包含 MapWidget 和我的自定义小部件的 AbsolutePanel，放在顶部，但我想尽可能多地使用 gwt 谷歌地图类。我已阅读文档并搜索了答案，但我无法弄清楚，因此代码示例会很棒。谢谢！

【问题讨论】：

标签： java javascript google-maps gwt google-maps-api-3

【解决方案1】：

只需将标准 GWT API 与您的地图 V3 API 一起使用即可。它们会很好地相互连接。

【讨论】：

我试过了，没问题（使用 gwt 的小部件），但我想使用 gwt google maps api 中的尽可能多的类（我觉得它更像是 OverlayView 类） .如果您可以在某处提供示例或链接，那就太好了。
人只需在你的 Eclipse 中链接两个 jar 并从他们两个中使用
我不是那个意思，我的意思是使用 OverlayView 在地图上添加自定义小部件的代码示例，如果可能的话

【解决方案2】：

我在这里找到了我需要的东西（javascript v3 api）： 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;
    }

}

【讨论】：