无法通过 JSNI 调用注入的谷歌地图 v3 api：$wnd.google.maps.LatLng 不是构造函数

Question

我正在尝试使用 JSNI 的谷歌地图，以下代码片段抛出异常：

com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.google.maps.LatLng 不是 com.google 的构造函数。 gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248) .....

任何人都可以帮我指出这里出了什么问题吗？

@Override
public void init(final Point center, final int zl)
{
    ScriptInjector
            .fromUrl(   "http://maps.googleapis.com/maps/api/js?sensor=false&language="
                                + Cookies.getCookie(LocaleInfo.getLocaleCookieName()))
            .setWindow(ScriptInjector.TOP_WINDOW).setCallback(new Callback<Void, Exception>()
            {
                public void onFailure(Exception reason)
                {
                    // I18N
                    Window.alert("load google maps api failed,all map function will not work.");
                }

                public void onSuccess(Void result)
                {
                    map = initMap(getElement(), center.getLatitude(), center.getLongitude(), zoomLevel = zl);
                }
            }).inject();
}

native JavaScriptObject initMap(Element canvas, double latitude, double longitude, int zoomLevel) /*-{
    return new $wnd.google.maps.Map(canvas, {
        zoom : zoomLevel,
        center : new $wnd.google.maps.LatLng(latitude, longitude),
        mapTypeId : $wnd.google.maps.MapTypeId.ROADMAP
    });
}-*/;

Answer 1

您可以尝试为 noWrap 传递第三个可选布尔参数吗？也许您在使用 DevMode 时遇到了一些错误。您是否尝试在部署应用程序后运行相同的代码？

Answer 2

在加载第一个 JavaScript 库后，MAP API 正在注入其他 JavaScript 库。

为了在页面加载后加载 Map API，Google 提供了额外的参数回调。回调方法在API加载后调用。

为了让它工作，你必须注册一个可以从外部 javascript 块调用的 GWT 方法。

   public static native void exportStaticMethod() /*-{
    $wnd.mapInit = $entry(@com.my.test.client.MyProject::init());
   }-*/;

在 onModuleLoad 上执行此方法，它可以从外部 java 脚本执行，如下所示：

function initialize()
{
        window.mapInit();
}

缺少的是在 GWT 代码中注入地图 API：

ScriptElement element = Document.get().createScriptElement();
    element.setLang("javascript");
    element.setType("text/javascript");
    element.setSrc("https://maps.googleapis.com/maps/api/js?callback=initialize&sensor=false");
    Document.get().getElementsByTagName("head").getItem(0).appendChild(element);

加载脚本后，将执行 init 方法。

private static void init()
{
    System.out.println("loaded");
}

请参阅此处加载客户端 API