Question

我正在尝试在GWT应用程序中显示天气图。我正在使用GWT 2.6.1和GoogleMaps JavaScript API的GWT包装器here（gwt-maps-3.8.0-pre1.zip）。

我正在尝试使用平铺服务器，与this example完全相同。我查看源，我看到他们使用叠加图像地图类型添加天气：

goes = new google.maps.ImageMapType({
            getTileUrl: function(tile, zoom) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-east-vis-1km-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime(); 
            },
            tileSize: new google.maps.Size(256, 256),
            opacity:0.60,
            name : 'GOES East Vis',
            isPng: true
        });
        map.overlayMapTypes.setAt("0",goes);

我也在查看如何从google's tutorials覆盖图像地图类型的示例，他们的方法几乎相同：

var imageMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      if (zoom < 17 || zoom > 20 ||
          bounds[zoom][0][0] > coord.x || coord.x > bounds[zoom][0][1] ||
          bounds[zoom][1][0] > coord.y || coord.y > bounds[zoom][1][1]) {
        return null;
      }

      return ['http://www.gstatic.com/io2010maps/tiles/5/L2_',
          zoom, '_', coord.x, '_', coord.y, '.png'].join('');
    },
    tileSize: new google.maps.Size(256, 256)
  });

  map.overlayMapTypes.push(imageMapType);

我尝试使用GWT包装器执行此操作：

package com.test.client;

import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.ImageMapType;
import com.google.maps.gwt.client.ImageMapTypeOptions;
import com.google.maps.gwt.client.ImageMapTypeOptions.Callback;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;
import com.google.maps.gwt.client.Point;
import com.google.maps.gwt.client.Size;

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

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

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

        ImageMapTypeOptions imto = ImageMapTypeOptions.create();
        imto.setGetTileUrl(new Callback(){

            @Override
            public String handle(Point coord, double z) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ z + "/" + coord.getX() + "/" + coord.getY() + ".png";
            }

        });
        imto.setTileSize(Size.create(256, 256));

        ImageMapType imt = ImageMapType.create(imto);

        map.getOverlayMapTypes().push(imt);
    }
}

但是，我在最后一行收到编译错误：

The method push(MapType) in the type MVCArray<MapType> is not applicable for the arguments (ImageMapType)

似乎GWT包装器缺少一些继承，并且不能将ImageMapType识别为MapType。所以我尝试在本机JavaScript中执行此操作：

package com.test.client;

import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.ImageMapType;
import com.google.maps.gwt.client.ImageMapTypeOptions;
import com.google.maps.gwt.client.ImageMapTypeOptions.Callback;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;
import com.google.maps.gwt.client.Point;
import com.google.maps.gwt.client.Size;

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

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

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

    public native void addWeatherLayer(GoogleMap map) /*-{
        var imageMapType = new $wnd.google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
            console.log("http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ zoom + "/" + coord.x + "/" + coord.y + ".png");
            "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ zoom + "/" + coord.x + "/" + coord.y + ".png";
            },
            tileSize: new $wnd.google.maps.Size(256, 256),
            isPng: true
        });

        map.overlayMapTypes.insertAt(0, imageMapType);

    }-*/;
}

此代码实际运行。如果我在查看地图时查看JavaScript控制台，我可以看到切片服务器URL的打印输出，并且它们是正确的。但是，地图上没有天气可见。

所以，我的问题是：

有没有办法在“纯GWT”中使用GWT包装器而不是原生JavaScript？
使用原生JavaScript时，为什么我的天气不可见？我已经检查过以确保有可见的天气，但它从未显示在地图上。

Answer 1

原来我是个白痴，忘了getTileUrl函数中的 return 关键字：

public native void addWeatherLayer(GoogleMap map) /*-{
        var imageMapType = new $wnd.google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
            return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ zoom + "/" + coord.x + "/" + coord.y + ".png";
            },
            tileSize: new $wnd.google.maps.Size(256, 256),
            isPng: true
        });

        map.overlayMapTypes.insertAt(0, imageMapType);

    }-*/;

我仍然很想知道“纯GWT”解决方案，但就目前而言，这是有效的。

GWT GoogleMaps JavaScript API：覆盖地图类型不可见

1 个答案: