Google地图GWT不适合容器大小 [英] Google Map GWT does not fit container size

问题描述

我有麻烦再次打电话来在GWT应用中加载Google地图。问题本身就是一旦地图被调用，它将不适合容器大小。这是一个很常见的问题，正如许多以前的SO问题所描述的那样：

1. 这里 这里


2. 此处


3. 这里

让我声明我试过所有上面的遗憾似乎没有任何工作。我还必须说我正在使用非官方版本的GWT Maps API v3，它可以在这里。因此，这是问题：

现在，奇怪的是，如果我更改浏览器大小，地图显示正确：

因此，它看起来像我需要以某种方式调度onResize事件...但我尝试了上述所有方法，但似乎没有任何工作。为了说明这一点，我构建地图并将其添加到容器的部分：

  private void buildMapMarinesPark（）{ 
 // Visualizar datos ... 
 LatLng center = LatLng.newInstance（52.62715,1.7734）; 
 MapOptions opts = MapOptions.newInstance（）; 
 opts.setZoom（9）; 
 opts.setCenter（center）; 
 opts.setMapTypeId（MapTypeId.HYBRID）; 
 MapTypeControlOptions controlOptions = MapTypeControlOptions.newInstance（）; 
 controlOptions.setMapTypeIds（MapTypeId.values（））; //使用它们全部
 controlOptions.setPosition（ControlPosition.TOP_RIGHT）; 
 opts.setMapTypeControlOptions（controlOptions）; 
 mapMarinePark =新的MapWidget（opts）; 
 mapMarinePark.setSize（100％，100％）; 
 //为缩放级别添加一些控件
 List< EuropeanMarineParkDataEntity> parksPerAnio = null; 
 listPolygon = new ArrayList< Polygon>（）; 
 Polygon poly = null; 
 for（int i = 2003; i <= ANIO_MAP_PARK; i ++）{
 parksPerAnio = this.hashAnioParks.get（+ i）; 
 if（parksPerAnio！= null）{
 for（EuropeanMarineParkDataEntity emp：parksPerAnio）{
 poly = this.createPolygon（emp）; 
 poly.setMap（mapMarinePark）; 
 listPolygon.add（poly）; （元素）DOM.getElementById（currentYear））。setPropertyObject（innerHTML，+（ANIO_MAP_PARK））; 
 
 //将地图添加到HTML主页面
 final DockLayoutPanel dock = new DockLayoutPanel（Unit.PX）; 
 dock.addNorth（mapMarinePark，500）; 
 $ b $ RootPanel.get（mapContainerProfile2）。add（dock）; 
 RootPanel.get（timeline）。setVisible（true）; 
 RootPanel.get（mapPanel2）。setVisible（true）; 
 RootPanel.get（gadget_marinepark）。setVisible（true）; 
 mapMarinePark.triggerResize（）; - >不起作用！ 
 onLoadedMapMarinePark（）; 
 
 
  

解决方案

当DOM尚未完全构建并检索到错误的维度时，您尝试绘制地图。
尝试在
Scheduler.get（）。scheduleDeferred（）调用的回调中绘制/创建映射。

更新：
此外，您还将 DockLayoutPanel code> RootPanel 。
这会导致问题。改为使用 RootLayoutPanel 。

正常构建DOM，并且在通常将地图添加到 DockLayoutPanel 调用 scheduleDeferred（）并将该地图添加到回调中的面板中

I'm having troubles making a second call to load a Google Map in a GWT app. The problem itself is that once the map is called, it won't fit the container size. This is a usual problem, as depicted in many previous SO questions:

1. Here
2. Here
3. Here
4. Here

Let me state that I've tried all of the above and sadly nothing seems to work. I must also say I'm using the unofficial version of GWT Maps API v3, which can be found here. Thus, this is the problem:

Now, weird enough, if I change the browser size, map displays correctly:

Thus, it looks like I need to "dispatch" the onResize event somehow...but I tried with all of the above methods and nothing seemed to work. Just for clarification this, is the part where I construct the map and add it to the container:

private void buildMapMarinesPark() {
    //Visualizar datos...
    LatLng center = LatLng.newInstance(52.62715,1.7734);
        MapOptions opts = MapOptions.newInstance();
        opts.setZoom(9);
        opts.setCenter(center);
        opts.setMapTypeId(MapTypeId.HYBRID);
        MapTypeControlOptions controlOptions = MapTypeControlOptions.newInstance();
        controlOptions.setMapTypeIds(MapTypeId.values()); // use all of them
        controlOptions.setPosition(ControlPosition.TOP_RIGHT);
        opts.setMapTypeControlOptions(controlOptions);
        mapMarinePark = new MapWidget(opts);
        mapMarinePark.setSize("100%", "100%");
        // Add some controls for the zoom level
        List<EuropeanMarineParkDataEntity> parksPerAnio = null;
        listPolygon = new ArrayList<Polygon>();
        Polygon poly = null;
        for(int i=2003;i<=ANIO_MAP_PARK;i++){   
            parksPerAnio = this.hashAnioParks.get(""+i);
            if(parksPerAnio != null){
            for(EuropeanMarineParkDataEntity emp : parksPerAnio){
                poly = this.createPolygon(emp);
                poly.setMap(mapMarinePark);
                listPolygon.add(poly);
                }
            }
        }       
        ((Element)DOM.getElementById("currentYear")).setPropertyObject("innerHTML", ""+(ANIO_MAP_PARK));

        // Add the map to the HTML host page
        final DockLayoutPanel dock = new DockLayoutPanel(Unit.PX);
        dock.addNorth(mapMarinePark, 500);

        RootPanel.get("mapContainerProfile2").add(dock); 
        RootPanel.get("timeline").setVisible(true); 
        RootPanel.get("mapPanel2").setVisible(true); 
        RootPanel.get("gadget_marinepark").setVisible(true); 
        mapMarinePark.triggerResize(); --> Does not work!           
        onLoadedMapMarinePark();

    }

解决方案

I guess you try to draw the map when the DOM hasn't been fully constructed and the wrong dimensions are retrieved. Try to draw/create the map in a callback of a Scheduler.get().scheduleDeferred() call.

Update: Also you are mixing a DockLayoutPanel with a RootPanel. That will cause issues. Use a RootLayoutPanel instead.

Construct the DOM normally and at the point where you normally add your map to the DockLayoutPanel call scheduleDeferred() and add the map to the panel in the callback

这篇关于Google地图GWT不适合容器大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！