InfoWindow中的DataGrid不顯示表數據

Question

我正在使用GWT和GoogleMaps GWT API（ v3.8 ，不，我不能使用branflakes GoogleMaps API）。

我試圖將DataGrid表放在地圖上的InfoWindow內。 只要在地圖外部顯示DataGrid，我就可以正常工作，但是每當在InfoWindow中添加DataGrid時，都不會顯示任何表行：

如果我右鍵單擊InfoWindow，轉到“檢查元素”，然后在GWT創建的一百萬個div中跋涉，我可以看到數據在那里-由於某種原因它是不可見的。

我已經做了大量的谷歌搜索工作，但是我所看到的只是DataGrid必須是LayoutPanel或ScrollPanel的子代。 但這正是我在做的：

package com.test.client;

import java.util.Arrays;

import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.InfoWindow;
import com.google.maps.gwt.client.InfoWindowOptions;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;

public class GwtTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
        options.setOtherParms("sensor=false");
        Runnable callback = new Runnable() {
            public void run() {
                createMap();
            }
        };
        AjaxLoader.loadApi("maps", "3", callback, options);

        //this works
        DataGrid dg = createTable();
        RootPanel.get("tableDiv").add(new ScrollPanel(dg));
    }

    public void createMap() {

        MapOptions mapOpts = MapOptions.create();
        mapOpts.setZoom(4);
        mapOpts.setCenter(LatLng.create(37.09024, -95.712891));
        mapOpts.setMapTypeId(MapTypeId.TERRAIN);
        mapOpts.setStreetViewControl(false);

        GoogleMap map = GoogleMap.create(Document.get().getElementById("map_canvas"), mapOpts);

        DataGrid dg = createTable();

        InfoWindowOptions iwo = InfoWindowOptions.create();
        iwo.setPosition(LatLng.create(37.09024, -95.712891));
        iwo.setContent(new ScrollPanel(dg).getElement());

        InfoWindow infoWindow = InfoWindow.create(iwo);
        infoWindow.open(map);
    }

    public DataGrid createTable(){
        Column columnA = new Column(new TextCell()){
            public Object getValue(Object object) {
                return "one";
            }
        };

        Column columnB = new Column(new TextCell()){
            public Object getValue(Object object) {
                return "two";
            }
        };

        Column columnC = new Column(new TextCell()){
            public Object getValue(Object object) {
                return "three";
            }
        };

        DataGrid dataGrid = new DataGrid();
        dataGrid.addColumn(columnA, "A");
        dataGrid.addColumn(columnB, "B");
        dataGrid.addColumn(columnC, "C");

        dataGrid.setRowCount(1);
        dataGrid.setRowData(Arrays.asList("one", "two", "three"));

        dataGrid.setWidth("200px");
        dataGrid.setHeight("100px");

        return dataGrid;
    }
}

我缺少一些步驟嗎？ 如何使用GoogleMaps API使DataGrid正確顯示在InfoWindow中？

編輯：沒有收到任何答案之后，我crossposted就此問題向GWT討論板這里 。

Answer 1

如果有人遇到這個問題，我最終只是使用CellTable來代替：

package com.test.client;

import java.util.Arrays;

import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.InfoWindow;
import com.google.maps.gwt.client.InfoWindowOptions;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;

public class GwtTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
        options.setOtherParms("sensor=false");
        Runnable callback = new Runnable() {
            public void run() {
                createMap();
            }
        };
        AjaxLoader.loadApi("maps", "3", callback, options);

        //this works
        CellTable dg = createTable();
        RootPanel.get("tableDiv").add(new ScrollPanel(dg));
    }

    public void createMap() {

        MapOptions mapOpts = MapOptions.create();
        mapOpts.setZoom(4);
        mapOpts.setCenter(LatLng.create(37.09024, -95.712891));
        mapOpts.setMapTypeId(MapTypeId.TERRAIN);
        mapOpts.setStreetViewControl(false);

        GoogleMap map = GoogleMap.create(Document.get().getElementById("map_canvas"), mapOpts);

        CellTable dg = createTable();


        InfoWindowOptions iwo = InfoWindowOptions.create();
        iwo.setPosition(LatLng.create(37.09024, -95.712891));
        iwo.setContent(dg.getElement());

        InfoWindow infoWindow = InfoWindow.create(iwo);
        infoWindow.open(map);

    }

    public CellTable createTable(){
        Column columnA = new Column(new TextCell()){

            @Override
            public Object getValue(Object object) {
                return "one";
            }

        };

        Column columnB = new Column(new TextCell()){

            @Override
            public Object getValue(Object object) {
                return "two";
            }

        };

        Column columnC = new Column(new TextCell()){

            @Override
            public Object getValue(Object object) {
                return "three";
            }

        };

        CellTable dataGrid = new CellTable();
        dataGrid.addColumn(columnA, "A");
        dataGrid.addColumn(columnB, "B");
        dataGrid.addColumn(columnC, "C");

        dataGrid.setRowCount(1);
        dataGrid.setRowData(Arrays.asList("one", "two", "three"));

        dataGrid.setWidth("200px");
        dataGrid.setHeight("100px");

        return dataGrid;
    }
}

Answer 2

您需要在onModuleLoad中使用RootLayoutPanel而不是RootPanel。 從根到DataGrid一直需要布局面板。 InfoWindow似乎不是一個布局面板，因此您可能需要自己調整大小，請參見：

http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#Resize

此外，將DataGrid放在滾動面板中。 您可以這樣做，但隨后必須給它一個明確的大小。 DataGrid有其自己的滾動面板，因此您也可以擺脫顯式創建的滾動面板。