如何从 GWT 代码添加谷歌地图对象？

Question

我想在我的 GWT 应用程序中使用谷歌地图。问题是 gwt-maps API 只支持 Google Maps API 第 2 版，而常规地图 api 是第 3 版。所以基本上我想做的是使用我的 GWT 代码中的标准 js 地图库，但这不工作：

public void onModuleLoad() {
        buildMap();
    }



    private final native void buildMap()/*-{



         <script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
            var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

        }-*/;

我怀疑问题在于 onModuleLoad 不等同于 body.onload。你怎么看？

Answer 1

您应该查看gwt-google-maps-v3，它是 Maps API 第 3 版的开源包装器。该项目在技术上已被弃用，因为它正在与 gwt-google-apis 合并，但它至少会让您走上正轨。

Answer 2

我有一个完整的应用程序来执行此操作。在https://github.com/dartmanx/mapmaker/tree/0.5.2查看项目

您可能需要特别注意我的 Google 地图实用程序类：

https://github.com/dartmanx/mapmaker/blob/0.5.2/src/main/java/org/jason/mapmaker/client/util/GoogleMapUtil.java

希望它有所帮助，我为那个 JSNI 经历了很多痛苦。

杰森

Answer 3

好的，我找到了解决办法。

我做的第一件事是创建一个 UIBinder 来保存地图的 div：

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</ui:UiBinder> 

下面是剩下的代码：

public void onModuleLoad() {
    mapCanvas canvas = new mapCanvas();
    Document.get().getBody().appendChild(canvas.getElement());
    buildMap();
}   


private final native void buildMap()/*-{
    var latlng = new $wnd.google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: $wnd.google.maps.MapTypeId.ROADMAP
    };
    var map = new $wnd.google.maps.Map($doc.getElementById("map_canvas"), myOptions);
}-*/;