在使用GWT Google Map API3调整网页大小之前，Google地图显示错误

Question

我的应用程序（单个网页应用程序）使用GWT-Maps-V3-Api-3.8.1创建Google Map。该应用程序有很多视图。使用GWT-Maps-V3-Api-3.8.1有两个视图（视图A和视图B）。第一次进入网页，如果我在视图B之前打开视图A，视图A中的地图就可以了，当我导航到视图B时，视图B中的地图显示不正确

同样，如果fistime转到网页，我会在视图A之前打开视图B. View B中的地图确定但是vew A中的地图有如上所述的错误。  这是我用来创建地图的代码

public class UiGoogleMap implements IsWidget,ClickMapHandler {

private MapWidget mapWidget=null;

private EventBus eventBus = null;

private List<UiMarker> selectedMarkers = new ArrayList<UiMarker>();

/**
 * ....
 * Some feild here
 * ....
 */


/**
 * Construct the Google map V3 without using {@link EventBus},
 * asynchronously loads the Maps API.
 */
public UiGoogleMap() {
    this(null);
}

public UiGoogleMap(EventBus bus) {
    this(bus, "");
}


public UiGoogleMap(EventBus bus, String mapApiKey) {
    super();
mapWidget=new MapWidget(MapOptions.newInstance());
    this.eventBus = bus;
    initMap();

    mapController = new MapController(mapWidget);
}
private void initMap() {
    mapWidget.setZoom(zoomLevel);
    mapWidget.addClickHandler(this);

    mapWidget.addIdleHandler(new IdleMapHandler() {

        @Override
        public void onEvent(IdleMapEvent event) {
            mapWidget.setSize("100%", "100%");
        }
    });
}

我在正确的情况下检查了mapWidget的div是

<div class="gwt-map-MapWidget-div"><div style="overflow: hidden;"></div></div>

并且mapWidget的div在错误的情况下是

<div class="gwt-map-MapWidget-div" style="position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);"><div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);"><div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"></div></div></div><div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div><div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div><div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div><div style="position: absolute; z-index: 0;"><div style="overflow: hidden;"></div></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);"><div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div><div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div><div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div><div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div></div></div></div></div>

当我改变窗口浏览器的大小（最小化等）时，错误图改变大小并给出正确的映射

我认为问题可能是

  

mapWidget = new MapWidget（MapOptions.newInstance（））;

此代码如上所述创建不同的代码div并导致问题。 感谢您的帮助。

修复：我通过添加处理程序

修复了上述错误

mapWidget.addIdleHandler(new IdleMapHandler() {

        @Override
        public void onEvent(IdleMapEvent event) {
             MapHandlerRegistration.trigger(mapWidget, MapEventType.RESIZE);
        }
    });

Answer 1

查看triggerResize方法：http://branflake2267.github.io/GWT-Maps-V3-Api/javadoc/3.9.0-build-17/

可能类似于：mapWidget.getMap().triggerResize();