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

Question

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

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-api合并，但它至少会让你走上正确的轨道。

Answer 2

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

您可能需要特别注意我的Google Maps实用程序类:

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