GWT 右键菜单,地图

1. 屏蔽右键菜单

   首先在 EntryPoint  中 加入一下代码, 使得不弹右键菜单

    RootLayoutPanel.get().addDomHandler(new ContextMenuHandler() {

     @Override public void onContextMenu(ContextMenuEvent event) {

     event.preventDefault();

     event.stopPropagation();

     }

    }, ContextMenuEvent.getType());

  2.需要弹菜单的控件,比如表格grid ,增加mouseup响应, popupPanel 是放置了 MenuBar  的 PopupPanel , 在MenuItem的Command  响应中, 将 popupPanel 调 hide()

      注意是如果在显示 popupPanel 时, x 或 y 位置都不加 一个大于2的值, 也会同时显示网页菜单, 不知为啥, 会加也是逼出来的.

grid.addDomHandler(new MouseUpHandler() {

public void onMouseUp(MouseUpEvent event) {

// TODO Auto-generated method stub

if (event.getNativeButton() == NativeEvent.BUTTON_RIGHT) {

System.out.println("MouseUpHandler : " + event.getNativeButton());

event.preventDefault();

     event.stopPropagation();

popupPanel.setPopupPosition(event.getClientX(), event.getClientY()+2);

popupPanel.show();

}

}

    }, MouseUpEvent.getType());

 

  3. 离线Google地图,

     先用了V2的, 后来发现了申请不了key了, 后来发现V3不用Key了,就改V3,还好能用. 参考了网上的例子 GoogleMapsAPIv3_OfflinePack , 非常感谢的.

该例子合入GWT中后, 发现还是挺好用的, 本地地图基本没有问题, 就差以后自己导入title了.    

 

HTML中合入:

 

<script type="text/javascript" src="mapapi.js"></script>

<script>

   function LocalMapType() {}

  LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);

  LocalMapType.prototype.maxZoom = 17;

  LocalMapType.prototype.minZoom = 14;

  LocalMapType.prototype.name = "本地";

  LocalMapType.prototype.alt = "显示本地地图";

  LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

      var img = ownerDocument.createElement("img");

      img.style.width = this.tileSize.width + "px";

      img.style.height = this.tileSize.height + "px";

      

      var ymax = 1 << zoom;

  var y = ymax - coord.y - 1;

      //var strURL = "mytile\\" + zoom + "\\" + coord.x + "\\" + y + ".png";

      var strURL = "expotile/" + zoom + "/" + coord.x + "/" + y + ".png";  

      img.src = strURL;

      return img;

   };

  </script>

 

 

程序中合入:

 

  /**

   * Internal initialization method.

   */ 

  private static final native GoogleMap getLocalMap()/*-{

        var myLatlng = new $wnd.google.maps.LatLng(31.18439, 121.49454);

    var myOptions = {

      center: myLatlng,

      zoom: 14,

      streetViewControl: false,

      mapTypeControlOptions: {

            mapTypeIds: ["local", $wnd.google.maps.MapTypeId.ROADMAP]

        }

    };

 

    var local =  new $wnd.google.maps.Map($doc.getElementById('map_canvas'),

        myOptions);

    //map.setMapTypeId('satellite');

    //map.MapTypes.insertAt(0, moonMapType);

    local.mapTypes.set('local', new $wnd.LocalMapType());

    local.setMapTypeId('local');

    return local;

}-*/;

 

调用后,就可以当正常对象使用:

    GoogleMap  map = getLocalMap();

    map.setCenter(LatLng.create(31.18439, 121.49454));

 

地图的div加入panel中, 在ie中要手工设 mapPanel 的大小, google浏览器不用,还没有发现为啥

    RootPanel mapPanel = RootPanel.get("map_canvas");

    contentPanel.add(mapPanel, DockPanel.NORTH);

    contentPanel.setCellWidth(mapPanel, "100%");

    

    mapPanel.setSize("900px", "800px");