仿照Google Maps的MapViewer

2012-11-23

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

模仿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来实现。

通过样式：

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多少

热点排行

Web前端

仿照Google Maps的MapViewer