1

我正在使用 GWT，并且正在尝试将 google-maps 添加到我的网站。因为我想使用 google-maps V3，所以我使用的是 JSNI。为了在我的网站中显示地图，我需要创建一个 id="map" 的 div 元素并在地图的初始化函数中获取它。我这样做了，结果很好，但它在网页上的位置很有趣，我希望它附加到我在代码中创建的面板上。所以我的问题是我该怎么做？我可以在面板内使用 GWT 以某种方式创建 div 吗？

我试过像这样创建一个新的 HTMLPanel：

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

runsPanel 是我要附加到的面板。然而，当我使用以下初始化函数时，它无法检索 div：

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 为空！”）

有任何想法吗？谢谢

4

3 回答 3

2

您需要确保initializeMap()在加载时调用，以验证 DOM 元素是否可访问。

尝试刷新您的方法并使用另一种技术来创建地图面板：

  1. 扩展Widget以定义将用于 Google 地图容器的自定义小部件：

    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();
        }
    }
}

  2. 调用初始化：

    runsPanel.add(new MapPanel());

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

参考：

于 2012-05-18T11:06:24.083 回答
1

如果您确保在调用 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 的高度，否则您将看不到地图。

于 2012-05-19T09:12:08.890 回答
0

您可能想通过使用 UiBinder 来简化事情；在此处查看 Hello World 示例：https ://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder

UiBinder 允许您编写定义 UI 布局结构的 XML，类似于使用 HTML 布局页面的方式。然而，XML 可以构造小部件，例如按钮等。此外，您可以将名称附加到 XML 元素并在 Java 代码中引用它以将事件处理程序绑定到它等等。它工作得很好，它使代码变得非常简单读书。

然而，在这些情况下，UiBinder 可以为您制作原生 HTML 元素并按照您想要的方式嵌套它们，而不必调用方法来制作小部件并将它们放入其他小部件中。然而，此外，UiBinder 文档说 UiBinder 可以更好地使用浏览器的本机表示事物的方式，从而产生更高效的代码（来自上面的链接）：

除了比通过代码更自然、更简洁地构建 UI 之外，UiBinder 还可以使您的应用程序更高效。浏览器通过将大的 HTML 字符串塞入 innerHTML 属性来构建 DOM 结构比通过一堆 API 调用更好。UiBinder 很自然地利用了这一点，结果是构建你的应用程序最愉快的方式也是构建它的最佳方式。

我认为此功能可能使浏览器更有可能正确注册您的小部件，以便稍后通过 getElementById() 找到它们。

您上面的代码在 UiBinder 中可能如下所示：

<g:HTMLPanel ui:field='my_HTMLPanel'>
  <div ui:field='map_div'>
    <!-- put some HTML here -->
  </div>
</g:HTMLPanel>
于 2012-05-19T08:12:15.427 回答