添加面板内部的div元素？(Adding a div element inside a panel?

我与GWT工作，我想谷歌地图添加到我的网站。因为我想用V3我使用谷歌JSNI - 地图。为了在我的网站上显示地图，我需要创建一个div元素id为“地图”，并把它在地图的初始化函数。我这样做了，而且制定了罚款，但其在网页上的位置是有趣的，我希望它被连接到一个面板，我创造了我的代码。所以我的问题是，我该怎么办呢？我能以某种方式创建一个div与GWT在面板内部？

我试图做的创建一个新的HTMLPanel是这样的：

runsPanel.add(new HTMLPanel("<div id=\"map\"></div>"));

凡runsPanel是面板我要附加到。然而，它不能以检索，当我使用下面的初始化函数股利：

private native JavaScriptObject initializeMap() /*-{

    var latLng = new $wnd.google.maps.LatLng(31.974, 34.813); //around Rishon-LeTsiyon
    var mapOptions = {
        zoom : 14,
        center : latLng,
        mapTypeId : $wnd.google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = $doc.getElementById('map');
    if (mapDiv == null) {
        alert("MapDiv is null!");
    }
    var map = new $wnd.google.maps.Map(mapDiv, mapOptions);
    return map;

}-*/;

（它会弹出警告 - “MapDiv为空！”）

有任何想法吗？谢谢

Answer 1:

你需要确保initializeMap()被调用上的负载，以验证DOM元素访问。

尝试并刷新你的方法，并使用其它技术来创建地图面板：

扩展Widget定义将被用于谷歌地图容器中的自定义部件：

 public class MapPanel extends Widget { private Element container; public MapPanel() { container = DOM.createDiv(); container.setId("map"); // this is required by the Widget API to define the underlying element setElement(container); } @Override protected void onLoad() { super.onLoad(); initializeMap(); } } }

调用初始化：
```
 runsPanel.add(new MapPanel()); 
```

还有其他的问题，比如id属性，硬编码在JSNI方法和代码强制重复，以及适当的位置initializeMap()以及是否创建了JSNI层的覆盖类型，但这里的范围之内。

参考文献：

GWT职位上的Widget最佳实践
谷歌开发者覆盖类型参考

Answer 2:

你的代码工作正常，如果您确保调用initializeMap之前runsPanel附加到DOM（）。

你可以用这个简单的入口点进行测试：

@Override
public void onModuleLoad() {

  final Panel runsPanel = new ...Panel; /* Use the kind of panel you like */

  runsPanel.add(new HTMLPanel("<div id=\"map\"></div>"));

  RootLayoutPanel.get().add(runsPanel);

  initializeMap();
}

这是不够的HTMLPanel添加到runsPanel。如果runsPanel本身没有连接到DOM，然后$doc.getElementById('map')无法找到任何东西。

注意：请务必将“地图” DIV弄好了，否则你不会看到地图的高度。

Answer 3:

您可能需要使用UiBinder的把事情简单化; 看到Hello World示例这里： https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder

UiBinder的让你写XML定义UI布局结构，类似于你可以使用HTML布局页面的方式。然而，XML可以构建窗口小部件，如按钮等。此外，可以附加一个名称，一个XML元素，是指它在Java代码到事件处理程序绑定到它，等它的伟大工程，它使代码很容易读书。

此外，然而，在这些情况下，UiBinder的可以使本地的HTML元素，你只需将其嵌套你想要的方式，而不必调用方法，使小部件，并把他们的其他部件内。此外，然而，UiBinder的文件说，UiBinder的可以做到使用浏览器代表的事情，理应得到更高效的代码（从上面的链接）的原生方式的一个更好的工作：

除了是建立自己的UI不是通过代码做一个更自然，更简洁的方式，UiBinder的也可以让你的应用更加高效。浏览器是在靠临时抱佛脚HTML的大串到innerHTML的建设DOM结构比由一群API调用的属性。 UiBinder的自然利用这一点，其结果是，要建立你的应用程序中最愉快的方式也是构建它的最好方式。

我认为（）这个功能可能会使它更容易为浏览器正确注册你的widget，使他们通过的getElementById后来发现。

你上面的代码可能是这样的UiBinder的：

<g:HTMLPanel ui:field='my_HTMLPanel'>
  <div ui:field='map_div'>
    <!-- put some HTML here -->
  </div>
</g:HTMLPanel>

文章来源: Adding a div element inside a panel?