GWT：在调整窗口大小之前不会加载 UI

Question

我知道 GWT 不再支持 quirks 模式。因此，不鼓励开发人员使用 RootPanel、DockPanel 等。在使用 RootLayoutPanel 和 DockLayoutPanel 实现我的应用程序时，我发现 UI 在调整浏览器窗口大小之前不会加载。

明确地说，我在开发模式下运行我的应用程序并刷新我的浏览器（谷歌浏览器）。尽管根据我的 Eclipse 控制台，一切似乎都已正常加载，但我的浏览器中什么也没有出现。调整浏览器窗口大小后，我的所有内容都可以正常加载。

虽然我在 DockLayoutPanel 中插入了一个 MapWidget，但似乎 MapWidget 并不是罪魁祸首，因为删除“panel.add(mapWidget)”行仍然有相同的结果。我可能会错过什么？

下面是我的主要课程的代码。为简洁起见，省略了 HTML 代码。在我的实际代码中，我只在其中放置了文本和样式。

public class MyApp implements EntryPoint {

    private MapWidget mapWidget;

    public void onModuleLoad() {
        loadMapWidget();
    }

    private void loadMapWidget() {

        // Does device have location tracking?
        boolean sensor = false;

        // Load proper map libraries
        ArrayList<LoadLibrary> loadLibraries = new ArrayList<LoadApi.LoadLibrary>();

        // Configure runnable
        Runnable onLoad = new Runnable() {

            @Override
            public void run() {
                // Center on Vancouver
                LatLng center = LatLng.newInstance(49.261226, -123.1139268);

                // Configure Map Widget options
                MapOptions mapOptions = MapOptions.newInstance();
                mapOptions.setMapTypeId(MapTypeId.ROADMAP);
                mapOptions.setCenter(center);
                mapOptions.setZoom(14);

                // Instantiate and configure Map Widget
                mapWidget = new MapWidget(mapOptions);

                // Configure Marker options
                MarkerOptions markerOptions = MarkerOptions.newInstance();
                markerOptions.setPosition(LatLng.newInstance(49.261226, -123.1139268));

                // Create Marker
                final Marker marker = Marker.newInstance(markerOptions);
                marker.setMap(mapWidget);

                plotMapWidgetOntoPanel();
            }

        };

        LoadApi.go(onLoad, loadLibraries, sensor);
    }

    private void plotMapWidgetOntoPanel() {
        DockLayoutPanel panel = new DockLayoutPanel(Unit.EM);
        panel.addEast(new HTML("..."), 20);
        panel.addNorth(new HTML("..."), 1.5);
        panel.addSouth(new HTML("..."), .5);
        panel.add(mapWidget);
        mapWidget.triggerResize();
        RootLayoutPanel.get().add(panel);
    }
}

Answer 1

为了使用 gwt MapWidget，你必须绝对设置它的大小

例如：mapwidget.setSize("600px","600px")

如果你想动态设置它的大小，你必须以这种方式根据它的父部件大小来设置它的大小：

mapwidget.setSize(mapwidget.getParent().getElement().getStyle().getWidth(),
                    mapwidget.getParent().getElement().getStyle().getHeight()); 

我希望这个解决方案对您有所帮助；