在面板中添加div元素？

Question

我正在使用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為空！”）

有任何想法嗎？ 謝謝

Answer 1

您需要確保在加載時調用initializeMap()以驗證DOM元素是否可訪問。

嘗試並刷新您的方法並使用另一種技術來創建地圖面板：

1. 擴展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(); } } } 

2. 調用初始化：

    runsPanel.add(new MapPanel()); 

還有其他問題，比如id屬性，在JSNI方法中硬編碼並強制重復代碼，以及initializeMap()的正確位置以及是否為JSNI層創建覆蓋類型，但這不在此范圍之內。

參考文獻：

• GWT發布Widget最佳實踐
• Google開發人員參考了Overlay類型

Answer 2

如果確保在調用initializeMap（）之前將runsPanel附加到DOM，那么您的代碼可以正常工作。

您可以使用這個簡單的EntryPoint進行測試：

@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')找不到任何東西。

注意：確保以某種方式設置“map”div的高度，否則您將看不到地圖。

Answer 3

您可能希望使用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屬性而不是通過一堆API調用來更好地構建DOM結構。 UiBinder自然而然地利用了這一點，結果是構建應用程序最愉快的方式也是構建它的最佳方式。

我認為此功能可能會使瀏覽器更有可能正確注冊您的小部件，以便稍后通過getElementById（）找到它們。

您的上述代碼在UiBinder中可能如下所示：

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