GWT：JSNI 函数调用 getElementById() 返回 Null

发布于 2024-10-31 13:56:38 字数 885 浏览 8 评论 0原文

我正在尝试使用 JSNI 在应用程序中显示 Google 地图。我已经在我的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 为空。有什么帮助吗？

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

原文

I am trying to use JSNI to display a Google Map within an Application. I have defined the script in my index.html page.

Here is the uibinder definition (snipped down to the essentials):

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

Here is the initializeMap() native function:

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

Unfortunately, mapDiv is null. Any help out there?

I am aware of the gwt-maps and gwt-maps-v3 projects. The first only supports v2 of the API, and gwt-maps-v3 will not work for me, hence the JSNI approach.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相权↑美人 2024-11-07 13:56:38

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

唯一重要的是，在调用 initializeMap() 之前，将

添加到文档 。

请尝试以下操作：

@Override
public void onModuleLoad() {

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

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

In principle, your code should work, and I've quickly tested it (by the way, it shouldn't be related to the Google Maps API at all).

The only important thing is, that you add your <div id="map"> to the document before you call initializeMap().

Please try the following:

@Override
public void onModuleLoad() {

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

Note especially, that you can't call initializeMap() from inside the constructor of MyUiBinderWidget, because at that point, the widget isn't attached to the document yet.

回复收藏 0 原文

~没有更多了~