|
|
楼主 |
发表于 2011-8-25 02:17
|
显示全部楼层
本帖最后由 divilis 于 2011-8-26 01:11 编辑
1 H, q7 z. \! {
; J1 B$ d7 B( Z% }, X& x, a0 T; C拖动地图的实现方式及代码.
# d0 }7 b" v% l2 d C" r5 Q( P
6 I" w0 T$ {' I/ H; N
5 t. |% B& ?! @1 a7 ]% b, G2 p2 W/ J9 f O6 F
- divilis@DIVILIS-GentooLinux /mnt/1T2 $ diff -Naur ./mapsbody-assistant_v1.2.6.js ./mapsbody-assistant_v1.2.7.js 8 P x( `4 y2 ]: G
- --- ./mapsbody-assistant_v1.2.6.js 2011-08-23 04:24:13.000000000 +08006 b/ ]! Y/ L4 L+ M
- +++ ./mapsbody-assistant_v1.2.7.js 2011-08-25 01:29:56.000000000 +0800# @+ y0 F$ {- B
- @@ -47,7 +47,7 @@
& ?4 t6 [ g7 T7 p - { visable: true} ,# \. p$ k9 r V4 H
- { items: [ 6 y: R6 Z% M# I) J2 k4 q* a
- { icon : "search" , command : 'enterKeyword'},/ f/ Q! {5 h; Z9 L( L9 E
- - { label : "Me", command : 'panTome' }
, A+ ?( |" _% d3 x6 {4 { ~6 W& z - + { label : "M", command : 'panTome' }
, a- P1 e" y0 U' t) v5 Z: } - ]}
0 u' J0 X3 H5 O8 {6 _# P - ]
2 [9 l1 z. \' ?6 l6 [ - };
7 U( Y% [; d6 L2 S. n) Q$ N - @@ -116,13 +116,21 @@/ R# v* j+ f8 V$ L/ @$ T
- this.handleGestureEnd.bindAsEventListener(this)
& u" Q- D+ ^5 ? x - );
4 ]( k2 X) I& W" f# v$ p -
4 @% [: [; ?) z! ?7 g - + // I want to handle the Drag event.0 F3 A$ M* J& e" s% _1 y0 C! a) q
- this.controller.listen(
3 N. E% M# b/ Q5 d - - this.controller.get("infopad"),; p; `5 I/ _, }
- - Mojo.Event.tap,
: f2 S5 E( r X/ d6 l) J* { - - function(event){
$ P6 X# U0 B- D& S1 W8 _8 B" Z - - if (event.count == 3)
+ Q7 k5 q- T& r4 d - - this.controller.get("infopad").style.display = "none";
; q/ D. I6 r/ A1 d - - }.bindAsEventListener(this)
8 U5 O& J/ R% |) U) C - + this.controller.document,2 n9 ^4 M" o5 u& ]9 C( y1 j
- + Mojo.Event.dragging,3 h# { u3 }$ a' D
- + this.handleDragingMap.bindAsEventListener(this)" d5 ~& k8 ^! v& I
- + );
0 A+ e# |! P+ m w" f, ]# g - + this.controller.listen(* V% w5 r$ ?; w$ L7 i: k
- + this.controller.document,' a3 G' n& y* h: m& g! X* o/ e
- + Mojo.Event.dragStart,
1 y5 N7 ]: g2 y; L - + this.handleDragMapStart.bindAsEventListener(this)
0 X, ~& P/ F6 y" m3 [/ W - + );
7 h6 f2 C* z- f+ [3 b - + this.controller.listen(8 [ \0 ^; F- c0 c! p9 j& D
- + this.controller.document,; D( n+ S- Y) |4 {& L' p( ]
- + Mojo.Event.dragEnd,
7 M! ~4 U: Z$ [# W1 j" i - + this.handleDragMapEnd.bindAsEventListener(this)
. T# g9 H$ X: @' `3 B - );
& }6 W, P1 G8 x - 3 t, }: w* o* h. C5 J/ x' X+ M
- // Pan to where you tap.
0 H6 E v4 @7 c8 M0 ~& @# w8 o - @@ -172,6 +180,9 @@$ q5 M# [/ D0 {$ p$ q5 c5 ]; ?
- // - GAFC -% j$ r2 ~# D6 ^) Y) o
- this.LAT = (25.213604 + this.offset_lat).toFixed(6); // 22.698998 -shuitian lat-
) S2 x" j. R( Z- b _0 }/ e: W - this.LON = (110.285375 + this.offset_lon).toFixed(6); // 113.961740 -shuitian lng-
' M7 A& J! ^6 Q7 t0 G, s, j - + , x" b9 G- m# A+ c" o
- + this.dragStartCentX = this.dragStartCentY = 0;# a, q+ A0 d+ I- p
- + this.initDragX = this.initDragY =0;
% m2 N* X2 H" w& U) I - # X+ i+ Z. ~/ j5 Z0 f
- // the cache point of your last location & zoom level
$ g. W* t6 n9 a" |0 b. w, L - this.cachePointCookie = new Mojo.Model.Cookie("cachePoint");; ~3 K1 b7 z* g+ A: M% b
- @@ -656,33 +667,68 @@
- w+ T) g" }5 _' [% r - handleGestureStart : function(evnet) {
% U: h' E# M4 t8 Y( b0 A5 _, e: @ - // Stop listen while we zoom in/out the map.6 |1 i n' j Q# `. D
- this.controller.stopListening(this.controller.document, Mojo.Event.tap, this.handleTap);
9 ^) ]: {3 D( d6 B2 e - + this.controller.stopListening(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));3 C" L; {# g! G- M" w2 R+ c
- + this.controller.listen(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this)); Z3 Z. B" f9 }
- + this.controller.listen(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));# [% _" c ^; p( n0 x8 Y
- this.controller.get("cross").innerHTML= "+ <font size=-2>" + this.zoomLv + "</font>";$ N3 \' w/ u, X; N; W4 V' }9 y
- },
6 V J( D9 v, G& q" K+ ]+ [) q - * K; a7 a- V$ K" F0 Z
- handleGestureChange : function(evnet) {5 ^6 v/ {: r# V4 U
- - this.controller.get("cross").innerHTML= "+ <font size=-2>" + Math.round(this.zoomLv*evnet.scale) + "</font>";% z( m+ x5 ~/ M( z$ r
- + this.controller.get("cross").innerHTML= "+ <font size=-2>" + Math.round(this.zoomLv * evnet.scale) + "</font>";
) |( Q1 [( j0 D' B) n, l - },% J: {) H: @ n# Y, F) l
- . k4 Q+ M, L7 A. M
- handleGestureEnd : function(evnet) {
$ i. U$ f' z4 n; X8 x: G - - this.zoomLv = Math.round(this.zoomLv * evnet.scale);7 Q7 z& G& S, Y8 v+ n: R/ o
- - if (this.zoomLv >= 18) this.zoomLv = 18;* l0 e( ~3 `4 O/ g# H- ?" }2 Z) x3 h) V
- - if (this.zoomLv <= 1) this.zoomLv = 1;4 F; S; I3 N9 k# r- W
- - this.map.setZoom(this.zoomLv);/ |7 C5 H/ s& L) A8 ?) D. y, O
- + if (event.scale != 1){
( C3 {, X- Q1 L& ]/ _( _4 b - + // If scale has been changed, zoom to a level that you want.
, m7 @' E' f* v$ Y - + this.zoomLv = Math.round(this.zoomLv * evnet.scale);
+ v3 @4 j$ t" p7 y1 ]) W+ C - + if (this.zoomLv >= 18) this.zoomLv = 18;; S2 S4 \: f" m8 z4 b3 F
- + if (this.zoomLv <= 1) this.zoomLv = 1;2 m: @! |' [ Y3 T6 H: R6 O
- + if (! this.isTracking){
{( d2 N+ D! I8 M+ R - + delete this.point;/ v. N% k. X! r; w1 A3 j+ J
- + this.point = this.map.pixelToPoint(new BMap.Pixel(event.centerX, event.centerY));0 E4 w ?8 @) I, v; k8 c4 H
- + // Tell our global VARs the map has been changed.
0 ?0 w! C# k0 B4 o c - + this.offsetX = this.offsetX + (this.point.lat - this.LAT);) f. M: X( d$ \
- + this.offsetY = this.offsetY + (this.point.lng - this.LON);7 ?) x0 W% T3 x' C3 l& m; z
- + this.LAT = this.point.lat;# s9 s( S6 k, a) x. Q
- + this.LON = this.point.lng;
& M1 A& B8 X/ p; R4 p) y - + this.map.centerAndZoom(this.point, this.zoomLv); y; ~% ? x7 S* o8 ?1 ^
- + } else {& b' t L) c/ O2 K6 `
- + this.map.setZoom(this.zoomLv);7 r% A/ H3 M* z$ U' ?2 b! y: k
- + }
$ V- O1 }/ r0 } _ - + } else {
( n: s% i+ ?# s' _ - + // Zoom out if you tap screen with tow fingers at the same time.( i7 f2 M7 {0 K7 Q% O( c
- + this.zoomLv -= 1;
+ z: q* g& n; g: J8 h- m5 k - + if (! this.isTracking){
' s' e& L. p& S6 z' }/ E - + delete this.point;
7 w# N( k# _" j& B - + this.point = this.map.pixelToPoint(new BMap.Pixel(event.centerX, event.centerY));4 r- S1 f5 w( O. ^/ N, w+ U8 P3 ~
- + // Tell our global VARs the map has been changed. t- v0 j8 f& s6 t- _
- + this.offsetX = this.offsetX + (this.point.lat - this.LAT);
! W* u/ w+ X0 z! C/ E1 x, l - + this.offsetY = this.offsetY + (this.point.lng - this.LON);& R" c9 V: W. s9 ^6 G6 P: E; B
- + this.LAT = this.point.lat;2 B+ b4 g7 \) b9 Z1 v
- + this.LON = this.point.lng;
% f) R. t# j- e, R$ P- t1 k6 t - + this.map.centerAndZoom(this.point, this.zoomLv);
0 k9 O" z1 B1 ]7 c7 n7 H; _+ J! o - + } else {
4 V/ i4 z' O: ^# J - + this.map.setZoom(this.zoomLv);8 q: j+ ^1 Z9 B4 @4 m% G
- + }( m8 N% T: r& J- ~
- + }
& F3 E$ X& C) h/ n9 V' ? - this.controller.get("cross").innerHTML= "+ <font size=-2>" + this.zoomLv + "</font>";2 p: v# J" l: U( v& C# O
- setTimeout(
% A" i3 {2 M. L0 w0 X$ c; ?! H& E - function(){ u, ~ H# I7 c7 W% c% A
- this.controller.get("cross").innerHTML= "+";& N9 w" G9 J/ B- {1 r) u
- },0 Y8 j! U, ~- v! S9 W1 X
- 2000);* i- L7 ~+ l& d: N8 ^
- -
& R; S( O1 ?! ~$ g - // Relisten when zoom in/out ends.. ~% x' x5 U7 d
- this.controller.listen(this.controller.document, Mojo.Event.tap, this.handleTap.bindAsEventListener(this));7 T i& b4 z7 x" X8 i$ P
- + this.controller.listen(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));3 O# p& Z9 J/ {5 w
- + this.controller.listen(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this));" f& E5 o) H- y) \- F+ `
- + this.controller.listen(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));9 e2 [2 _. I: v
- },( @. q' E3 w7 j* L9 }8 r
- " h7 I# E+ F* Z# N" a: C( `. t& `
- handleTap : function(evnet) {! c. Q* r% ^! f: u# X: s7 m+ |. E
- if (event.count == 2){
3 K( T" o- O& i - // Stop tracking, and pan to where you tap.: W2 G8 E6 B9 c7 M( h
- this.stopTracking();
$ r6 r: r( w+ y# ?3 i* p; S$ t2 L- ^ - + delete this.point;
; {( M$ g& j+ C4 d, \; m - this.point = this.map.pixelToPoint(new BMap.Pixel(event.down.x, event.down.y));
1 b( t- h" H& R# G -
6 ^" _# U# J7 \. E5 { - // Tell our global VARs the map has been changed.3 B9 L5 O; M I: ^
- @@ -690,10 +736,8 @@& c1 d7 W/ q. a8 m
- this.offsetY = this.offsetY + (this.point.lng - this.LON);3 F& O7 _5 n5 e( q6 l+ A
- this.LAT = this.point.lat;
7 F( H! R5 R' q% S9 W8 D& z! A9 p - this.LON = this.point.lng;+ O" u- e B2 f, w! H! G# f# D
- - this.map.panTo(this.point);
9 y$ U; X# H! f" f$ l - - Mojo.Log.info("this.zoomLv>>>>>>>>"+this.zoomLv);
! G3 H2 _0 f4 |. v9 D C/ C - - Mojo.Log.info("PanTo>>>>>>>>"+this.LON+","+this.LAT);6 x: ~8 T! X' ?
- - Mojo.Log.info("offsetXY>>>>>>>>"+this.offsetX+","+this.offsetY);" U+ o" r5 E0 g$ m, S& B+ Z
- + this.zoomLv +=1;, @# T1 ]" q6 K8 m0 F
- + this.map.centerAndZoom(this.point, this.zoomLv);: c9 T+ k4 s. T" D! `4 ^
-
* y, p8 ?, N8 k - // Double tap on the screen will hide the search widget.3 n3 w) m- ^% ?7 _5 e- i; \
- this.searchElement.style.display = "none";
7 G C. {3 r& r3 a: l+ ~' U - @@ -703,7 +747,38 @@+ T+ k( ^. `! t/ o. t7 T/ n: f
- this.controller.get("infopad").style.display = "none";
+ v l( l; B& Y- q/ _5 ?7 u/ g - }
. l6 n6 z1 U/ W( l" k - },
. w8 t) g# E4 C4 R5 Q5 @4 k/ `' A - -
/ q) ^2 b# B' S; i - +
; \8 a p/ N. M, V - + handleDragMapStart : function(event) {
) \2 o: e# {2 ]& ~* V, E7 O - + this.getDragStartPixel(event.down.x, event.down.y); V# t1 {5 O; H7 |, c( @/ F+ g0 w
- + },- y+ y% h5 A; Q* O
- +
& k3 I% p. U9 q/ M - + handleDragingMap : function(event) {! {; B0 ?5 B8 ?- ]
- + this.captureNewCenter(event.move.x, event.move.y);; [8 y) M1 v0 @3 ^2 q1 b; G5 c0 q
- + },
# Z8 m+ ~- o$ T' { C* n" s4 a" n8 p - +
1 C; i% f: r. T$ o - + handleDragMapEnd : function(event) {( d" m) T: S+ [6 G$ l
- + clearTimeout(this.delayMapPanning);: d% b& s% F) P5 \' O2 ^
- + },# M5 ^: C8 @( N! ?9 I
- +
0 ]# c! \! v. B: u - + getDragStartPixel : function(x, y){
8 W5 `! J/ q' h( a - + this.dragStartCentX = this.map.pointToPixel(this.map.getCenter()).x;
2 D& l0 ]. Z$ L6 T, p# i1 H - + this.dragStartCentY = this.map.pointToPixel(this.map.getCenter()).y;
( W" ]+ }: [/ y) A) h- B5 {- @ - + this.initDragX = x;. H$ G, G! n8 [+ p
- + this.initDragY = y;2 j% l! S4 F, \2 A: f9 |$ n% |# A
- + },6 m9 `( J4 l! G3 L5 [- `! G
- +
) N; d6 y6 L7 C5 H2 b# }4 W - + delayMapPanning : function(){% n9 k, v& R# p, Y
- + this.map.panTo(this.point);* d! J; S' M6 \' f) b; ]
- + }," F% l, @" @: e- W
- +
7 }, a/ N# K2 \8 P( m9 ^ - + captureNewCenter : function(x, y){
/ A: `6 @ i% q/ F+ @ - + delete this.point;
$ M/ r( a# A- } @) o - + this.point = this.map.pixelToPoint(new BMap.Pixel(this.dragStartCentX + x - this.initDragX, this.dragStartCentY + y - this.initDragY));) j) X% \5 q5 Q' a2 o: D
- + this.LAT = this.point.lat;1 U* Z* ]2 D7 h- O
- + this.LON = this.point.lng;
[8 s6 p- C% X+ e# t' { F - + this.delayMapPanning();
8 \$ S7 ~ E: q+ [) {; [) B - + },
. ^0 Y6 g' [2 w9 g. K7 k( _7 B - +
7 F# J# N+ W4 @1 B5 o - closeInfoWindow : function(T) {' b. |& ]1 C0 u; k! S
- // close info window in T seconds.& a. ~) u* _: O$ d- [# o7 f/ ]8 K
- setTimeout(this.map.closeInfoWindow(), T*1000);4 w0 c0 d( n j# W9 n1 I0 X/ x* R2 ~
- @@ -726,7 +801,9 @@
% |& N. r6 L Y& X. N - this.controller.stopListening(this.controller.document, "gesturechange", this.handleGestureChange);9 l" b* ], H9 Q7 b, I Z0 H
- this.controller.stopListening(this.controller.document, "gestureend", this.handleGestureEnd);
/ r5 @% c$ h' m% N0 O$ a* d1 W - this.controller.stopListening(this.controller.document, Mojo.Event.tap, this.handleTap);; Z$ ]) j" ?* R L
- - this.controller.stopListening(this.controller.get("infopad"), Mojo.Event.tap, function(event){ if (event.count == 3) this.controller.get("infopad").style.display = "none" }.bindAsEventListener(this) );8 S, v5 ?+ ?7 K" U
- + this.controller.stopListening(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));
% h" E, V6 _! F% f - + this.controller.stopListening(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this));
* { h) a6 C$ [+ l+ ], y - + this.controller.stopListening(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));! V4 r$ k/ q4 u' t% g# c* U
- }
% f5 `/ Q# b" {' g. I5 x( x$ h - };
/ h9 G0 ~5 r" h- r3 I' ^1 I& l - }());
8 l* P2 }$ X; B. A5 b; E% W, r - \ No newline at end of file
+ ^* b! L6 w `6 V d# @4 g - divilis@DIVILIS-GentooLinux /mnt/1T2 $ - `5 B0 W; f2 F! x* C
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？加入我们
×
|
|Archiver|手机版|小黑屋|吹友吧
( 京ICP备05078561号 )
狗仔卡
显身卡
发表于 2011-8-23 01:20
发表于 2011-8-23 08:53
