如何使用BranFlake GWT-Maps-V3 API創建自定義MapType？

Question

我試圖通過Branflake（或Branflake2267）GWT/Java庫使用（非官方）Google Maps V3 JavaScript API。所有的基礎庫已經加載，我得到了標準的Google衛星圖像顯示沒有問題。

但是，現在我想要創建自定義地圖類型（MapType），該類型提供了自己的Element值進行顯示。提供的ImageMapType和StyledMapType是不夠的。

JavaScript庫支持此功能，Google甚至在其文檔中提供了example CoordMapType map。

我想知道如何使用Brandon Donnelson創建的GWT庫來做這件事。

我嘗試到目前爲止...

我試圖創建一個純Java類，implements MapType，但還是失敗了不正確的對象類型：

class FooMap implements MapType {...} 

@com.google.gwt.maps.client.maptypes.MapTypeRegistry::set(Ljava/lang/String;Ljava/lang/Object;)([string:'FooID', Java object: com.example.FooMap@1360213231]) 
com.google.gwt.core.client.JavaScriptException: (Error)@com.google.gwt.core.client.impl.Impl::apply(Ljava/lang/Object;Ljava/lang/Object;Ljava/lang/Object;)([JavaScript object(44), JavaScript object(32), JavaScript object(46)]): Expected value implementing google.maps.MapType 

我想通它必須是一個JavaScript對象試圖擴展，但它也失敗：

class FooMap extends JavaScriptObject implements MapType {...} 

JavaScriptObject must be created from JavaScript. [paraphrased] 

我試圖通過JavaScript創建它，但沒有運氣：

static public FooMap newInstance(MapOptions options) { 
    return createJso(options).cast(); 
} 

static private final native JavaScriptObject createJso(MapOptions options) /*-{ 
    return new $wnd.google.maps.Map(document.getElementById('map-canvas'), options); 
}-*/; 

[ERROR] Line 296: Instance fields cannot be used in subclasses of JavaScriptObject 

我打消了我的本地成員（說不上哪裏放他們，但至少我可以測試），但createJso()方法仍然會拋出異常：

com.google.gwt.core.client.JavaScriptException: (TypeError) @com.google.gwt.core.client.impl.Impl::apply(Ljava/lang/Object;Ljava/lang/Object;Ljava/lang/Object;)([JavaScript object(30), JavaScript object(32), JavaScript object(33)]): Cannot read property 'offsetWidth' of null 

其中，儘可能接近我可以告訴其他帖子，是因爲我還沒有創建一個地圖，因此還沒有創建一個map-canvas元素......但這就是我想要做的。

我目前沒有想法，所以認爲這裏的好人可能有一些想法。如果我取得任何進展，我會添加更新（或者可能回答<有希望的樣子>）。

Answer 1

好的，我是這麼做的。請注意，這僅僅是實際Google Map的「拼貼提供者」，而不是地圖本身。

static public final class MyMap extends JavaScriptObject { 
    // These are actually done through JSNI calls because JavaScriptObject 
    // doesn't allow adding local member variables in derived classes. 
    // "DisplayLayer" is my own details about how to display these map tiles. 
    // @getter @setter private DisplayLayer displayLayer; 
    // @getter @setter private String urlPrefix; 

    protected MyMap() {} 

    static public MyMap newInstance(MapOptions options, DisplayLayer layer) { 
     MyMap map = createJso(options).cast(); 
     map.setDisplayLayer(layer); 
     if (layer != null) { 
      ... 
     } 
     return map; 
    } 

    static private native JavaScriptObject createJso(MapOptions options) /*-{ 
     var map = new Object(); 
     map.tileSize = new $wnd.google.maps.Size(256, 256); 
     map.maxZoom = 31; 
     map.getTile = function(point, zoom, owner) { 
      return @com.example.project.MyMap::getTile(Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/maps/client/base/Point;ILcom/google/gwt/dom/client/Document;)(this, point, zoom, owner); 
     }; 
     return map; 
    }-*/; 

    private native void setDisplayLayer(DisplayLayer layer) /*-{ 
     this.displayLayer = layer; 
    }-*/; 

    private native DisplayLayer getDisplayLayer() /*-{ 
     return this.displayLayer; 
    }-*/; 

    private native void setUrlPrefix(String prefix) /*-{ 
     this.urlPrefix = prefix; 
    }-*/; 

    private native String getUrlPrefix() /*-{ 
     return this.urlPrefix; 
    }-*/; 

    private native void setVisible(boolean visible) /*-{ 
     this.visible = visible; 
    }-*/; 

    private native boolean isVisible() /*-{ 
     return this.visible; 
    }-*/; 

    static public Element getTile(JavaScriptObject jsmap, Point point, int zoom, Document owner) { 
     final MyMap map = jsmap.cast(); 
     final DisplayLayer dl = map.getDisplayLayer(); 
     final ImageElement img = owner.createImageElement(); 
     img.getStyle().setWidth(256, Style.Unit.PX); 
     img.getStyle().setHeight(256, Style.Unit.PX); 
     ... set img.src and various CSS styles based on display-layer ... 
     return img; 
    } 
}