如何将 GWT 的 Google 地图添加到 FormPanel

Question

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

首先，有一个扩展 FormPanel 的 windowForm.class，我编写了一个 mapWindowForm.class 来扩展这个 windowForm.class，如下所示。 http://paste.ideaslabs.com/show/Q0ThysUrSF 问题是我应该如何添加这张地图“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)，所以我在 Maps.loadMapsApi() 中将“2”作为第二个参数。不幸的是，第一次调用mapWindowForm.class，window.alert出现了，说明Map.loadMapsApi()没有成功。但是第二次调用这个类，window.alert 直到我刷新网页才出现。当我试图给出“3”时，它表明传感器应被给出为真或假。当我尝试使用 gwt-maps-3.8.1(Maps v3 API) 时，导入不起作用。

我尝试了一些方法将此地图添加到 frompanel 中，如下所示

1. 添加（地图）；

2. LayoutContainer lc=新的Layoutcontainer(); lc.add（地图）； 添加（lc）；

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

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

谢谢。

---

你好，布拉杰，

非常感谢您的回复。

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

mapWindowForm form = new mapWindowForm();

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

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

本项目中其他形式的代码如下：(BaseWindow.java extends Window)

BaseWindow 窗口 = new BaseWindow(new mapWindowForm());

window.show();

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

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

所以，我将继承添加到 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 扩展 Window，windowForm.java 扩展 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();
}

这将显示一个标题为“这是地图”的表单，其中没有任何内容。 但是，当我取消标记切换时，表单将不会显示。单击按钮不会有任何反应。我想知道 MapOptions 不起作用（API 未加载？）是正确的还是因为 GWT 容器出现了一些错误？

---

创建一个新的谷歌网络应用程序项目并尝试如下代码：

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 不会显示在 Google Map 中。 所以，我添加了一个按钮，它已经显示出来了。并添加一个idleListener，出现Window.alert，表示地图没有加载。

另一方面，在我的项目中，添加到 gwt.xml 仍然编译失败，因为它不支持脚本标签，即使有网络连接。因此，我在 home_page.html 中添加了脚本，但仍然无法加载地图。与此同时，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 地图添加到 FormPanel 中？

这里是代码。

只需调用以下行，地图就会添加到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));
}

截图：

Answer 2

我使用 branflake API 已经有一段时间了，目前它在 GWT 2.8 上运行良好。

https://mvnrepository.com/artifact/com.github.branflake2267/gwt-maps-api

但是，它不再维护，我正在四处寻找替代方案。与此同时，我推荐它。唯一的缺点是它使用的是 3.1 API 版本，该版本已过时。如果我找到前进的道路，或者找到替代方案，我会回帖。