java - 如何将 GWT 的 Google map 添加到 FormPanel 中

Question

我是 GWT 的新手，在这里遇到了一些问题。我需要在我的 GWT 网络中的表单上显示 Google map 。

首先，有一个扩展 FormPanel 的 windowForm.class，我写了一个扩展此 windowForm.class 的 mapWindowForm.class，如下所示。 http://paste.ideaslabs.com/show/Q0ThysUrSF问题是我该如何添加这张 map “final MapWidget map = new MapWidget(Location, 2);”这是这个 FormPanel 中的一个 MapWidget:“mapWindowForm.class”

该系统由 GWT-2.5.0 开发。我导入的库是 gwt-maps-1.1.1.jar(Maps v2 API 1.1.1)，所以我将“2”作为 Maps.loadMapsApi() 中的第二个参数。不幸的是，第一次调用 mapWindowForm.class 时， window.alert 出现了，表明 Map.loadMapsApi() 没有成功。但是第二次调用这个类，window.alert 直到我刷新网页才出现。当我试图给出“3”时，它表明传感器应为 true 或 false。当我尝试使用 gwt-maps-3.8.1(Maps v3 API) 时，导入不起作用。

我尝试了一些方法将这个 map 添加到 frompanel 中，如下所示

1. 添加( map )；

2. LayoutContainer lc= new Layoutcontainer();lc.add( map )；添加(LC);

但是两者都不起作用，它只是显示一个没有任何内容的 FormPanel。

我不确定是 MapWidget 没有创建还是 MapWidget 没有添加到 FormPanel 中成功

谢谢。

---

嗨，布拉吉，

非常感谢您的回复。

我已经在我的代码中尝试了你的建议，但仍然遇到一些问题。

mapWindowForm form = new mapWindowForm();

GoogleMap gmap = googleMap.create(form.getElement(), options);

但是，我仍然不知道如何将 gMap 添加到我的 mapWindowForm 中。

此项目中的其他窗体代码如下:(BaseWindow.java extends Window)

BaseWindow window = new BaseWindow(new mapWindowForm());

窗口显示();

我发现了这个问题 Example "Google Maps API v3 for GWT" Project for Eclipse .

正如这个问题所声称的，我需要添加 <inherits name="com.google.maps.gwt.GoogleMaps" />在我的 project.gwt.xml 和一个加载 map api 的脚本中。但是也有人说不能在gwt.xml中添加脚本。

因此，我将 inherits 添加到 gwt.xml 并将脚本添加到我的 project.html。但根据https://code.google.com/p/gwt-google-apis/wiki/MapsGettingStarted，我有点困惑, 是import com.google.gwt.maps, 而这一期, import com.google.maps.gwt, 它们有什么区别？

再次感谢。

---

我试过下面的代码(BaseWindow.java extends Window, windowForm.java extends FormPanel)

onClick(){

//    MapOptions options  = MapOptions.create() ;

//    options.setCenter(LatLng.create( latCenter, lngCenter ));   
//    options.setZoom( 6 ) ;
//    options.setMapTypeId( MapTypeId.ROADMAP );
//    options.setDraggable(true);
//    options.setMapTypeControl(true);
//    options.setScaleControl(true) ;
//    options.setScrollwheel(true) ;
      windowForm panel = new mapWindowForm();

//    GoogleMap gMap = GoogleMap.create( panel.getElement(), options ) ;

      //BaseWindow(FormPanel formpanel, String ID, String title, int Height, int Weight)
      BaseWindow window = new BaseWindow(panel,"Maps","This is Maps", 500, 650);
      window.show();
}

这将显示一个标题为“This is Maps”但其中没有任何内容的表单。但是，当我取消标记切换时，表单将不会显示。单击该按钮将不会发生任何事情。我想知道 MapOptions 是否不起作用(API 未加载？)是否正确或因为 GWT 容器而出现一些错误？

---

在创建了一个新的 Google web 应用程序项目并尝试了以下代码之后:

public class Map implements EntryPoint {

    public void onModuleLoad() {
        FormPanel panel = new FormPanel();
        panel.setWidth("100%");
        panel.setHeight("100%");
        MapOptions options = MapOptions.create();
        options.setCenter(LatLng.create(23,-151));
        options.setZoom(2);
        options.setMapTypeId(MapTypeId.ROADMAP);
        options.setDraggable(true);
        options.setMapTypeControl(true);
        options.setScaleControl(true);
        options.setScrollwheel(true);
        Button btn = new Button();
        GoogleMap gMap = GoogleMap.create(panel.getElement(), options);
        RootPanel.get().add(panel);
        RootPanel.get().add(btn);

        gMap.addIdleListener(new GoogleMap.IdleHandler() {

            public void handle() {
                Window.alert("Idle");

            }
        });
    }
}

同时将gwt-map.3.8.1.jar添加到项目中，并在Map.gwt.xml中添加如下配置

<inherits name="com.google.maps.gwt.GoogleMaps" />
<script src="http://maps.google.com/maps/api/js?sensor=false" />

在有网络连接的情况下编译成功。但是当作为 Web 应用程序运行时，url http://127.0.0.1:8888/Map.html?gwt.codesvr=127.0.0.1:9997不显示谷歌地图。所以，我添加了一个按钮，它已经显示出来了。并添加一个 idleListener，出现 Window.alert，表示 map 未加载。

另一方面，在我的项目中，添加到 gwt.xml 仍然编译失败，因为它不支持脚本标签，即使有网络连接。因此，我已将脚本添加到 home_page.html 中，但仍然无法加载 map 。与此同时，Window.alert 也出现了。

连接到 http://maps.google.com/maps/api/js?sensor=false在浏览器中会得到如下信息

window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-TW\u0026","http://mt1.googleapis.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-TW\u0026"],null,null,null,null,"m@262000000",["https://mts0.google.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-TW\u0026","https://mts1.google.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-TW\u0026"]],[["http://khm0.googleapis.com/kh?v=149\u0026hl=zh-TW\u0026","http://khm1.googleapis.com/kh?v=149\u0026hl=zh-TW\u0026"],null,null,null,1,"149",["https://khms0.google.com/kh?v=149\u0026hl=zh-TW\u0026","https://khms1.google.com/kh?v=149\u0026hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-TW\u0026","http://mt1.googleapis.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-TW\u0026"],null,null,null,null,"h@262000000",["https://mts0.google.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-TW\u0026","https://mts1.google.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-TW\u0026","http://mt1.googleapis.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-TW\u0026"],null,null,null,null,"t@132,r@262000000",["https://mts0.google.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-TW\u0026","https://mts1.google.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-TW\u0026"]],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=84\u0026hl=zh-TW\u0026","http://khm1.googleapis.com/kh?v=84\u0026hl=zh-TW\u0026"],null,null,null,null,"84",["https://khms0.google.com/kh?v=84\u0026hl=zh-TW\u0026","https://khms1.google.com/kh?v=84\u0026hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/mapslt?hl=zh-TW\u0026","http://mt1.googleapis.com/mapslt?hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=zh-TW\u0026","http://mt1.googleapis.com/mapslt/ft?hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/vt?hl=zh-TW\u0026","http://mt1.googleapis.com/vt?hl=zh-TW\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=zh-TW\u0026","http://mt1.googleapis.com/mapslt/loom?hl=zh-TW\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=zh-TW\u0026","https://mts1.googleapis.com/mapslt?hl=zh-TW\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=zh-TW\u0026","https://mts1.googleapis.com/mapslt/ft?hl=zh-TW\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=zh-TW\u0026","https://mts1.googleapis.com/mapslt/loom?hl=zh-TW\u0026"]]],["zh-TW","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/zh_tw/mapfiles/api-3/16/11","3.16.11"],[662838505],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=149\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",262000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",262000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"m",262000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"m",262000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",132],[0,"r",132000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",132],[0,"r",132000000]],[null,"zh-TW","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"zh-TW","US",null,18],0],[null,null,[null,"zh-TW","US",null,18],3],[null,null,[null,"zh-TW","US",null,18],6],[null,null,[null,"zh-TW","US",null,18],0],["https://mts0.google.com/vt","https://mts1.google.com/vt"],"/maps/vt"],2,500,["http://geo0.ggpht.com/cbk?cb_client=maps_sv.uv_api_demo","http://www.gstatic.com/landmark/tour","http://www.gstatic.com/landmark/config","/maps/preview/reveal?authuser=0","/maps/preview/log204","/gen204?tbm=map","http://static.panoramio.com.storage.googleapis.com/photos/"]], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/zh_tw/mapfiles/api-3/16/11/main.js");
})();

Answer 1

如何将 GWT 的 Google map 添加到 FormPanel 中？

这是代码。

只需调用下面的代码， map 就会添加到 formPanel 中。

GoogleMap gMap = GoogleMap.create(formPanel.getElement(), options);

---

更多配置定义如下:

• gwt.xml:

  <inherits name="com.google.maps.gwt.GoogleMaps" />
  <script src="http://maps.google.com/maps/api/js?sensor=false" />
  

• gwt-maps.jar在项目的构建路径中。

---

示例代码:

public void onModuleLoad() {
    FormPanel formPanel = new FormPanel();
    formPanel.setWidth("500px");
    formPanel.setHeight("650px");

    RootPanel.get().add(formPanel);

    MapOptions options = MapOptions.create();

    options.setZoom(6);
    options.setMapTypeId(MapTypeId.ROADMAP);
    options.setDraggable(true);
    options.setMapTypeControl(true);
    options.setScaleControl(true);
    options.setScrollwheel(true);

    GoogleMap gMap = GoogleMap.create(formPanel.getElement(), options);

    gMap.setCenter(LatLng.create(58.378679, -2.197266));
}

截图: