GWT TabPanel 和 Google 地图的问题
使用 Google Web Toolkit（带有 Google 地图扩展）时遇到一个小问题：
我想将 Google 地图插入 TabLayoutPanel 中。没有 TabLayoutPanel 一切都工作正常。但是，一旦地图位于选项卡内，它的行为就非常奇怪（它没有居中，当您尝试滚动时会“跳跃”。）。
使用 TabPanel 而不是 TabLayoutPanel 时也会出现同样的问题。
从我的代码中提取：
在我的 EntryPoint 类的 onModuleLoad - 方法中：
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;
}
}
似乎地图不喜欢位于选项卡内..有谁知道问题可能出在哪里？
谢谢。
安迪
Working with Google Web Toolkit (with Google Maps Extension) I got a little problem:
I want to insert a Google Map into a TabLayoutPanel. Without that TabLayoutPanel everything worked fine. But as soon as the Map is inside of a tab it behaves really strange (its not centered right, and "jumps" when you try to scroll.).
The same Problem is when using TabPanel instead of TabLayoutPanel.
extract from my code:
in the onModuleLoad - method of my EntryPoint class:
DockLayoutPanel mainPanel;
MainUITabs tabWidget = new MainUITabs();
mainPanel.add(tabWidget);
RootLayoutPanel.get().add(mainPanel);
the MainUITabsWiget looks about like that:
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;
}
}
Seems like the Map doesn't like to be inside a tab..does anyone have an idea where the problem could be?
Thanks.
Andy
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
TabPanel文档说“这个小部件仅在怪异模式下工作。如果您的应用程序处于标准模式，请改用TabLayoutPanel。”
因此，如果您的页面具有 DOCTYPE 并且因此处于标准模式，则表明您会遇到问题。
我发现在标准模式下使用 TabPanel 时，第一个选项卡上的小部件（一开始不可见）并不总是正确呈现。解决方法是使用 SelectionHandler.onSelection 在显示选项卡时呈现这些元素，如已弃用方法
TabPanel#onTabSelected的文档中所述。但是阅读我上面引用的内容，这可能是自找麻烦，在标准模式下您应该使用 TabLayoutPanel 代替。The TabPanel docs say that "This widget will only work in quirks mode. If your application is in Standards Mode, use TabLayoutPanel instead."
So, if your page has a DOCTYPE and thus is in Standards Mode, that suggests you'll have problems.
I found that when using a TabPanel in Standards Mode, widgets on tabs after the first one (which aren't visible at first) don't always render correctly. A workaround was to render these elements when the tab is shown, by using SelectionHandler.onSelection, as noted in the docs for the deprecated method
TabPanel#onTabSelected. But reading the bit I quoted above, that's probably asking for trouble and in Standards Mode you ought to use TabLayoutPanel instead.乍一看，这看起来像是我在将 TinyMCE（所见即所得编辑器）与 GWT 集成时遇到的问题 - 一般来说，像这样的组件不喜欢 DOM 更改 - 在这种情况下，它会在您切换选项卡时发生（在我的情况下）是拖放）。
IIRC，解决方案是在屏幕上未显示时从其环绕的文本字段中删除 TinyMCE 小部件。在您的情况下，您希望从 tabPanel 中删除 MapWidget，但它未显示。我对 Google Maps API 不太熟悉，不知道是否有指定的方法可以执行此操作，但您可以尝试简单的
tabPanel.remove(googleMapsTab);。At first glance this looks like a problem I had with integrating TinyMCE (a WYSIWYG editor) with GWT - generally, components like these don't like when the DOM changes - in this case, it happens when you switch tabs (in my case it was drag & drop).
IIRC, the solution was to remove the TinyMCE widget from the text field it wrapped around when it wasn't shown on the screen. In your case, you'd want to remove the MapWidget from tabPanel, while it's not shown. I'm not familiar enough with the Google Maps API to know if there's a designated method to do that, but you can try a simple
tabPanel.remove(googleMapsTab);.