仿照Google Maps的MapViewer

模仿Google Maps的MapViewer

下面要写的东西是一个使用GWT编写的在有限区域内通过拖动查看整个地图的简单实现。

一些细节：

为什么能拖？
com.google.gwt.user.client.ui.MouseListener 通过实现这个接口，可以实现UI对象对鼠标的Enter,Down,Leave,Move,Up动作的支持。

com.google.gwt.user.client.ui.FocusPanel 并不是每个UI对象都能够实现MouseListener接口的，可以通过添加到FocusPanel来实现。
怎么才能显示地图的局部，或者说怎么把其他部分藏起来？

通过样式：

java 代码

DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");



DOM.setStyleAttribute(viewPortArea.getElement(), "position","relative");

设置显示区域的"overflow"属性为"hidden"及"position"属性为"relative"，图片可以实现局部显示显示框内。

代码：

java 代码

package cn.gov.imwb.client;



import com.google.gwt.user.client.DOM;

import com.google.gwt.user.client.Event;

import com.google.gwt.user.client.ui.AbsolutePanel;

import com.google.gwt.user.client.ui.Composite;

import com.google.gwt.user.client.ui.FocusPanel;

import com.google.gwt.user.client.ui.Image;

import com.google.gwt.user.client.ui.MouseListener;

import com.google.gwt.user.client.ui.Widget;



/**

* @author sheva.wen

*

*/

public class MapViewerPanel extends Composite {

 public int areaHeight;



 public int areaWidth;



 public int centerLeft;



 public int centerTop;



 public int imageHeight;



 public String imageUrl;



 public int imageWidth;



 public int maxLeft;



 public int maxTop;



 public int minLeft;



 public int minTop;



 private Image image;



 private FocusPanel mouseListenerContainer;



 public double showPositionLeftRatio;



 public double showPositionTopRatio;



 private int startLeft;



 private int startTop;



 private int startX;



 private int startY;



 private int state = 0;//用于判断当前用户的鼠标动作



 private AbsolutePanel viewArea;



 private AbsolutePanel viewPortArea = new AbsolutePanel();



 /**

 *

 * @param areaWidth 显示区域的宽

 * @param areaHeight 显示区域的高

 * @param imageUrl 地图的链接

 * @param imageWidth 地图的宽

 * @param imageHeight 地图的高

 * @param showPositionLeftRatio 地图初始显示的位置最左占宽度的比例

 * @param showPositionTopRatio 地图初始显示的位置最上占宽度的比例

 */

 public MapViewerPanel(int areaWidth, int areaHeight, String imageUrl,

 int imageWidth, int imageHeight, double showPositionLeftRatio,

 double showPositionTopRatio) {

 mouseListenerContainer = new FocusPanel(viewPortArea);

 viewArea = new AbsolutePanel();

 /**

 * 将地图（图片）上的默认浏览器行为除去。

 */

 image = new Image(){

 /**

 * 这个部分必须紧跟在实例化过程的后面，不然就不起作用，没有在官方文档里找到原因。

 */

 public void onBrowserEvent (Event event)

 {

 DOM.eventPreventDefault(event);

 super.onBrowserEvent(event);

 }



 };

 viewArea.add(image);

 image.setPixelSize(imageWidth, imageHeight);

 image.setUrl(imageUrl);



 viewPortArea.setPixelSize(areaWidth, areaHeight);

 viewPortArea.addStyleName("viewportViewer");

 DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");



 DOM.setStyleAttribute(viewPortArea.getElement(), "position",

 "relative");

 initWidget(mouseListenerContainer);







 this.showPositionLeftRatio = showPositionLeftRatio;

 this.showPositionTopRatio = showPositionTopRatio;

 this.areaWidth = areaWidth;

 this.areaHeight = areaHeight;

 this.imageUrl = imageUrl;

 this.imageWidth = imageWidth;

 this.imageHeight = imageHeight;



 /**

 * 设置图片可被拖放的极限，防止图片被拖出边界

 */



 maxLeft = imageWidth - areaWidth;

 maxTop = imageHeight - areaHeight;

 minLeft = -(imageWidth - areaWidth);

 minTop = -(imageHeight - areaHeight);



 /**

 * 地图初始应该在的位置

 */

 centerLeft = (int) ((areaWidth - imageWidth) * showPositionLeftRatio);

 centerTop = (int) ((areaHeight - imageHeight) * showPositionTopRatio);



 viewPortArea.add(viewArea, centerLeft, centerTop);

 /**

 * 鼠标拖放的行为

 */

 MouseListener listener = new MouseListener(){



 public void onMouseDown(Widget sender, int x, int y) {

 state = 1;

 startX = x;

 startY = y;

 startLeft = viewPortArea.getWidgetLeft(viewArea);

 startTop = viewPortArea.getWidgetTop(viewArea);



 }



 public void onMouseEnter(Widget sender) {



 }



 public void onMouseLeave(Widget sender) {

 state = 0;

 DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");

 }



 public void onMouseMove(Widget sender, int x, int y) {

 if(state == 1){

 DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "move");

 if(viewPortArea.getWidgetLeft(viewArea) >= minLeft

 && viewPortArea.getWidgetLeft(viewArea) <= maxLeft

 && viewPortArea.getWidgetTop(viewArea) >= minTop

 && viewPortArea.getWidgetTop(viewArea) <= maxTop){

 viewPortArea.setWidgetPosition(viewArea,startLeft + (x - startX), startTop + (y - startY));

 }

 }

 }



 public void onMouseUp(Widget sender, int x, int y) {

 // TODO 缺报当拖放结束时，地图还在显示框内

 if(viewPortArea.getWidgetLeft(viewArea) < minLeft){

 viewPortArea.setWidgetPosition(viewArea, minLeft, viewPortArea.getWidgetTop(viewArea));

 }

 if(viewPortArea.getWidgetTop(viewArea) < minTop){

 viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), minTop);

 }

 if(viewPortArea.getWidgetLeft(viewArea) > 0){

 viewPortArea.setWidgetPosition(viewArea, 0, viewPortArea.getWidgetTop(viewArea));

 }

 if(viewPortArea.getWidgetTop(viewArea) > 0){

 viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), 0);

 }

 state = 0;

 DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");

 }



 };

 mouseListenerContainer.addMouseListener(listener);



 }



}

代码很容易理解，这只是一个很简易的实现，至少还有以下需要完善：

地图分块载入

支持鼠标滚轮的缩放

“鹰眼”功能。

感兴趣的跟进一下：)

1 楼 liuxyu 2007-09-29

用GWT做google map我有兴趣。
先试了下你的demo。在滕讯浏览器下脚本错误，不能运行。IE下正常。

程序还没来得及看。

2 楼 sheva.wen 2007-09-30

感兴趣就跟进以下:)
我用TT查看过了，好像没什么问题。
把脚本错误发来看看。

3 楼 liuxyu 2007-10-01

行: 3

字符: 39

错误: 尚未实现

代码: 0

我刚系统重装。tt版本可能有点老。2.02
不过之前的tt应该比较新

4 楼 sheva.wen 2007-10-02

@liuxyu
看不出什么，IE报错太恶心。
不想在这个问题上花时间了。

5 楼纯情小火鸡 2008-01-29

请问楼主还有没有实现其他的功能了?比如加载地图图片赢眼等的啊能留下你的联系方式吗?

6 楼纯情小火鸡 2008-01-30

<div class='quote_title'>sheva.wen 写道</div><div class='quote_div'>下面要写的东西是一个使用GWT编写的在有限区域内通过拖动查看整个地图的简单实现。 一些细节：<ol style='margin-right: 0px;'><li>为什么能拖？ <a href='http://code.google.com/webtoolkit/documentation/com.google.gwt.user.client.ui.MouseListener.html'>com.google.gwt.user.client.ui.MouseListener</a> 通过实现这个接口，可以实现UI对象对鼠标的Enter,Down,Leave,Move,Up动作的支持。<a href='http://code.google.com/webtoolkit/documentation/com.google.gwt.user.client.ui.FocusPanel.html'>com.google.gwt.user.client.ui.FocusPanel</a> 并不是每个UI对象都能够实现MouseListener接口的，可以通过添加到FocusPanel来实现。</li><li>怎么才能显示地图的局部，或者说怎么把其他部分藏起来？ </li></ol><blockquote dir='ltr' style='margin-right: 0px;'>通过样式：<div class='code_title'>java 代码</div><div class='dp-highlighter'><ol class='dp-j'><li class='alt'>DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden"); </li><li> </li><li class='alt'>DOM.setStyleAttribute(viewPortArea.getElement(), "position","relative"); </li></ol></div>设置显示区域的"overflow"属性为"hidden"及"position"属性为"relative"，图片可以实现局部显示显示框内。</blockquote>代码：<blockquote dir='ltr' style='margin-right: 0px;'><div class='code_title'>java 代码</div><div class='dp-highlighter'><ol class='dp-j'><li class='alt'>package cn.gov.imwb.client; </li><li> </li><li class='alt'>import com.google.gwt.user.client.DOM; </li><li>import com.google.gwt.user.client.Event; </li><li class='alt'>import com.google.gwt.user.client.ui.AbsolutePanel; </li><li>import com.google.gwt.user.client.ui.Composite; </li><li class='alt'>import com.google.gwt.user.client.ui.FocusPanel; </li><li>import com.google.gwt.user.client.ui.Image; </li><li class='alt'>import com.google.gwt.user.client.ui.MouseListener; </li><li>import com.google.gwt.user.client.ui.Widget; </li><li class='alt'> </li><li>/** </li><li class='alt'> * @author sheva.wen </li><li> * </li><li class='alt'> */ </li><li>public class MapViewerPanel extends Composite { </li><li class='alt'> public int areaHeight; </li><li> </li><li class='alt'> public int areaWidth; </li><li> </li><li class='alt'> public int centerLeft; </li><li> </li><li class='alt'> public int centerTop; </li><li> </li><li class='alt'> public int imageHeight; </li><li> </li><li class='alt'> public String imageUrl; </li><li> </li><li class='alt'> public int imageWidth; </li><li> </li><li class='alt'> public int maxLeft; </li><li> </li><li class='alt'> public int maxTop; </li><li> </li><li class='alt'> public int minLeft; </li><li> </li><li class='alt'> public int minTop; </li><li> </li><li class='alt'> private Image image; </li><li> </li><li class='alt'> private FocusPanel mouseListenerContainer; </li><li> </li><li class='alt'> public double showPositionLeftRatio; </li><li> </li><li class='alt'> public double showPositionTopRatio; </li><li> </li><li class='alt'> private int startLeft; </li><li> </li><li class='alt'> private int startTop; </li><li> </li><li class='alt'> private int startX; </li><li> </li><li class='alt'> private int startY; </li><li> </li><li class='alt'> private int state = 0;//用于判断当前用户的鼠标动作 </li><li> </li><li class='alt'> private AbsolutePanel viewArea; </li><li> </li><li class='alt'> private AbsolutePanel viewPortArea = new AbsolutePanel(); </li><li> </li><li class='alt'> /** </li><li> * </li><li class='alt'> * @param areaWidth 显示区域的宽 </li><li> * @param areaHeight 显示区域的高 </li><li class='alt'> * @param imageUrl 地图的链接 </li><li> * @param imageWidth 地图的宽 </li><li class='alt'> * @param imageHeight 地图的高 </li><li> * @param showPositionLeftRatio 地图初始显示的位置最左占宽度的比例 </li><li class='alt'> * @param showPositionTopRatio 地图初始显示的位置最上占宽度的比例 </li><li> */ </li><li class='alt'> public MapViewerPanel(int areaWidth, int areaHeight, String imageUrl, </li><li> int imageWidth, int imageHeight, double showPositionLeftRatio, </li><li class='alt'> double showPositionTopRatio) { </li><li> mouseListenerContainer = new FocusPanel(viewPortArea); </li><li class='alt'> viewArea = new AbsolutePanel(); </li><li> /** </li><li class='alt'> * 将地图（图片）上的默认浏览器行为除去。 </li><li> */ </li><li class='alt'> image = new Image(){ </li><li> /** </li><li class='alt'> * 这个部分必须紧跟在实例化过程的后面，不然就不起作用，没有在官方文档里找到原因。 </li><li> */ </li><li class='alt'> public void onBrowserEvent (Event event) </li><li> { </li><li class='alt'> DOM.eventPreventDefault(event); </li><li> super.onBrowserEvent(event); </li><li class='alt'> } </li><li> </li><li class='alt'> }; </li><li> viewArea.add(image); </li><li class='alt'> image.setPixelSize(imageWidth, imageHeight); </li><li> image.setUrl(imageUrl); </li><li class='alt'> </li><li> viewPortArea.setPixelSize(areaWidth, areaHeight); </li><li class='alt'> viewPortArea.addStyleName("viewportViewer"); </li><li> DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden"); </li><li class='alt'> </li><li> DOM.setStyleAttribute(viewPortArea.getElement(), "position", </li><li class='alt'> "relative"); </li><li> initWidget(mouseListenerContainer); </li><li class='alt'> </li><li> </li><li class='alt'> </li><li> this.showPositionLeftRatio = showPositionLeftRatio; </li><li class='alt'> this.showPositionTopRatio = showPositionTopRatio; </li><li> this.areaWidth = areaWidth; </li><li class='alt'> this.areaHeight = areaHeight; </li><li> this.imageUrl = imageUrl; </li><li class='alt'> this.imageWidth = imageWidth; </li><li> this.imageHeight = imageHeight; </li><li class='alt'> </li><li> /** </li><li class='alt'> * 设置图片可被拖放的极限，防止图片被拖出边界 </li><li> */ </li><li class='alt'> </li><li> maxLeft = imageWidth - areaWidth; </li><li class='alt'> maxTop = imageHeight - areaHeight; </li><li> minLeft = -(imageWidth - areaWidth); </li><li class='alt'> minTop = -(imageHeight - areaHeight); </li><li> </li><li class='alt'> /** </li><li> * 地图初始应该在的位置 </li><li class='alt'> */ </li><li> centerLeft = (int) ((areaWidth - imageWidth) * showPositionLeftRatio); </li><li class='alt'> centerTop = (int) ((areaHeight - imageHeight) * showPositionTopRatio); </li><li> </li><li class='alt'> viewPortArea.add(viewArea, centerLeft, centerTop); </li><li> /** </li><li class='alt'> * 鼠标拖放的行为 </li><li> */ </li><li class='alt'> MouseListener listener = new MouseListener(){ </li><li> </li><li class='alt'> public void onMouseDown(Widget sender, int x, int y) { </li><li> state = 1; </li><li class='alt'> startX = x; </li><li> startY = y; </li><li class='alt'> startLeft = viewPortArea.getWidgetLeft(viewArea); </li><li> startTop = viewPortArea.getWidgetTop(viewArea); </li><li class='alt'> </li><li> } </li><li class='alt'> </li><li> public void onMouseEnter(Widget sender) { </li><li class='alt'> </li><li> } </li><li class='alt'> </li><li> public void onMouseLeave(Widget sender) { </li><li class='alt'> state = 0; </li><li> DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default"); </li><li class='alt'> } </li><li> </li><li class='alt'> public void onMouseMove(Widget sender, int x, int y) { </li><li> if(state == 1){ </li><li class='alt'> DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "move"); </li><li> if(viewPortArea.getWidgetLeft(viewArea) >= minLeft </li><li class='alt'> && viewPortArea.getWidgetLeft(viewArea) <= maxLeft </li><li> && viewPortArea.getWidgetTop(viewArea) >= minTop </li><li class='alt'> && viewPortArea.getWidgetTop(viewArea) <= maxTop){ </li><li> viewPortArea.setWidgetPosition(viewArea,startLeft + (x - startX), startTop + (y - startY)); </li><li class='alt'> } </li><li> } </li><li class='alt'> } </li><li> </li><li class='alt'> public void onMouseUp(Widget sender, int x, int y) { </li><li> // TODO 缺报当拖放结束时，地图还在显示框内 </li><li class='alt'> if(viewPortArea.getWidgetLeft(viewArea) < minLeft){ </li><li> viewPortArea.setWidgetPosition(viewArea, minLeft, viewPortArea.getWidgetTop(viewArea)); </li><li class='alt'> } </li><li> if(viewPortArea.getWidgetTop(viewArea) < minTop){ </li><li class='alt'> viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), minTop); </li><li> } </li><li class='alt'> if(viewPortArea.getWidgetLeft(viewArea) > 0){ </li><li> viewPortArea.setWidgetPosition(viewArea, 0, viewPortArea.getWidgetTop(viewArea)); </li><li class='alt'> } </li><li> if(viewPortArea.getWidgetTop(viewArea) > 0){ </li><li class='alt'> viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), 0); </li><li> } </li><li class='alt'> state = 0; </li><li> DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default"); </li><li class='alt'> } </li><li> </li><li class='alt'> }; </li><li> mouseListenerContainer.addMouseListener(listener); </li><li class='alt'> </li><li> } </li><li class='alt'> </li><li>} </li></ol></div>代码很容易理解，这只是一个很简易的实现，至少还有以下需要完善：<ol><li>地图分块载入 </li><li>支持鼠标滚轮的缩放 </li><li>“鹰眼”功能。 </li></ol>感兴趣的跟进一下：)</blockquote></div>

7 楼 darkfxux 2008-02-01

邮箱多少，有写问题想问啊

8 楼 darkfxux 2008-02-02

感兴趣，楼主如何EMAIL多少

相关推荐