Question

我正在尝试使用JSNI在应用程序中显示Google Map。我在index.html页面中定义了脚本。

这是uibinder定义（剪切到要点）：

<g:HTMLPanel ui:field="mapboxV3ContentPanel">
    <!-- div for display of the actual map -->
    <div id="map"><!-- --></div>
</g:HTMLPanel>

这是initializeMap（）本机函数：

private native void initializeMap() /*-{

    var latLng = new $wnd.google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 8,
        center: latLng,
        mapTypeId: $wnd.google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = $doc.getElementById('map');
    if (mapDiv==null) {
        alert("MapDiv is null!");
    }
    var map = new $wnd.google.maps.Map(mapDiv, mapOptions);
}-*/;

不幸的是，mapDiv为null。有任何帮助吗？

我知道gwt-maps和gwt-maps-v3项目。第一个只支持API的v2，而gwt-maps-v3对我不起作用，因此是JSNI方法。

Answer 1

原则上，您的代码应该可以使用，我已经快速测试了它（顺便说一句，它根本不应与Google Maps API相关）。

唯一重要的是，在致电<div id="map">之前，您已将initializeMap() 添加到文档。

请尝试以下方法：

@Override
public void onModuleLoad() {

  RootPanel.get().add(new MyUiBinderWidget()); // your widget with the map div
  initializeMap();
}

特别注意，您无法从initializeMap()的构造函数内部调用MyUiBinderWidget，因为此时窗口小部件尚未附加到文档中。

GWT：JSNI函数调用getElementById（）返回Null

1 个答案: