GWT 谷歌地图 V3 叠加小部件

GWT Google Maps V3 overlay widgets

本文关键字：小部 叠加 V3 谷歌地图 GWT      更新时间：2023-09-26

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

只需使用标准 GWT API 以及您的地图 V3 API。它们将足够好地互连。

我在这里找到了我需要的东西（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;
    }
}
相关文章：