Question

使用Google Web Toolkit（使用Google Maps Extension）我遇到了一个问题：

我想将Google地图插入TabLayoutPanel。没有那个TabLayoutPanel一切正常。但是，只要Map位于选项卡内部，它就会表现得非常奇怪（它不是居中右侧，而是在您尝试滚动时“跳转”。）。

使用TabPanel而不是TabLayoutPanel时，同样的问题。

从我的代码中提取：

在onModuleLoad - 我的EntryPoint类的方法：

    DockLayoutPanel mainPanel;
    MainUITabs tabWidget = new MainUITabs();
    mainPanel.add(tabWidget);
    RootLayoutPanel.get().add(mainPanel);

MainUITabsWiget看起来像这样：

public class MainUITabs extends Composite {

public MainUITabs(){
    TabLayoutPanel tabPanel = new TabLayoutPanel(10, Unit.PCT);

    MapWidget googleMapsTab = buildMapWidget();

    tabPanel.add(googleMapsTab, "Google Maps");

    initWidget(tabPanel);
}

private MapWidget buildMapWidget() {

    LatLng coord = LatLng.newInstance(51.509, 11.434);
    final MapWidget map = new MapWidget(coord, 2);
    map.setSize("600px", "300px");
    map.setCenter(coord);

    map.addControl(new LargeMapControl());  

    map.addOverlay(new Marker(coord));

    return map;
}

}

好像地图不喜欢在标签内...任何人都知道问题出在哪里？

感谢。

安迪

Answer 1

乍一看，这看起来像是将TinyMCE（WYSIWYG编辑器）与GWT集成时遇到的问题 - 通常，这些组件在DOM更改时不喜欢 - 在这种情况下，它会在切换标签时发生（在我的情况是拖放） IIRC，解决方案是从屏幕上没有显示的文本字段中删除TinyMCE小部件。在您的情况下，您希望从tabPanel删除MapWidget，，而不显示。我对谷歌地图API并不熟悉，知道是否有指定方法可以做到这一点，但你可以尝试一个简单的tabPanel.remove(googleMapsTab);。

Answer 2

TabPanel docs表示“此小部件仅在怪癖模式下工作。如果您的应用程序处于标准模式，请改用TabLayoutPanel。”

因此，如果您的页面有DOCTYPE，因此处于标准模式，这表示您会遇到问题。

我发现在标准模式下使用TabPanel时，第一个选项卡上的小部件（最初不可见）上的小部件并不总能正确呈现。解决方法是在显示选项卡时使用SelectionHandler.onSelection呈现这些元素，如不推荐使用的方法TabPanel#onTabSelected的文档中所述。但是阅读上面引用的那个，这可能是一个问题，在标准模式下你应该使用TabLayoutPanel。

GWT TabPanel和谷歌地图的问题

2 个答案: