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

Question

我的应用程序(单个网页应用程序)使用 GWT-Maps-V3-Api-3.8.1 创建 Google map 。该应用程序有很多View。使用 GWT-Maps-V3-Api-3.8.1 有两个 View ( View A 和 View B)。第一次访问网页时，如果我在 View B 之前打开 View A，则 View A 中的 map 正常，当我导航到 View B 时， View B 中的 map 显示不正确，如下所示

类似地，如果第一次访问网页，我会在 View A 之前打开 View B。 View B 中的 map 正常，但 View A 中的 map 有错误，如上所示。 这是我用来创建 map 的代码

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>

当我更改窗口浏览器的大小(最小化等...)时，错误 map 会更改大小并给出正确的 map

我想也许问题是

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