|
|
楼主 |
发表于 2011-8-25 02:17
|
显示全部楼层
本帖最后由 divilis 于 2011-8-26 01:11 编辑
1 _5 P; C E% Q8 j. {& r% \4 c0 [* B# L% n' A! ]7 O
拖动地图的实现方式及代码.
7 H; k4 q( {: l- o) i# y8 N8 W' ]: U( s, C8 D' Q# b2 Y; ^# S" D; b
( ~, }5 v. S; _ O4 y5 F
+ \ @$ ~7 D& a( K" {* U; C. W' f- divilis@DIVILIS-GentooLinux /mnt/1T2 $ diff -Naur ./mapsbody-assistant_v1.2.6.js ./mapsbody-assistant_v1.2.7.js
* p0 I5 O/ m. |3 J* \# U- D( K - --- ./mapsbody-assistant_v1.2.6.js 2011-08-23 04:24:13.000000000 +0800
' D" R; B, b6 X9 c: }/ W( i - +++ ./mapsbody-assistant_v1.2.7.js 2011-08-25 01:29:56.000000000 +0800, K4 ]) R" i5 b. |# q) c# n, a* R3 `* a
- @@ -47,7 +47,7 @@
, g9 a |3 ^1 g) V, ] - { visable: true} ,& f R8 y# C I+ ?- s b
- { items: [ _' M. l; G" i7 w
- { icon : "search" , command : 'enterKeyword'},
- a9 e/ h7 G: K; D# e3 e3 ^5 [ - - { label : "Me", command : 'panTome' }8 i. M# h" H# a+ `( Z3 u7 Z
- + { label : "M", command : 'panTome' }; |, u: p) b0 k5 k
- ]}, W, R+ U8 Y3 ~
- ]! [! y: n e w& }1 h7 l
- };
6 C7 _ y3 p7 N9 v - @@ -116,13 +116,21 @@" D/ c- q* w9 s; O
- this.handleGestureEnd.bindAsEventListener(this)
; P" A$ Q, n6 k$ Q0 y, B! | - );, D/ q; W+ W; N; E# l$ ~
-
' P3 |( {. m' ~% y - + // I want to handle the Drag event.
3 z. p! {: c2 h+ |& B. m - this.controller.listen(
4 m7 H5 _. P' R/ L9 I3 ~2 x - - this.controller.get("infopad"),
2 |) F% B2 W, V& n0 i - - Mojo.Event.tap,* `9 W! _1 S4 B1 L4 B
- - function(event){6 Q- C- m+ s, N, L+ b3 a1 Q
- - if (event.count == 3)
6 T" I4 a2 `! b8 } - - this.controller.get("infopad").style.display = "none";6 |2 R9 P6 f. f- X
- - }.bindAsEventListener(this)4 J2 S6 B4 N* p! L) ~! h6 ]2 p/ T, W
- + this.controller.document,
' L O0 p" Z, S2 u) P6 t - + Mojo.Event.dragging,
5 p4 a# O: V8 z8 ]! \9 P. ~- T# ^ - + this.handleDragingMap.bindAsEventListener(this)0 |# m2 g) } m7 n) y% O! C
- + );" U' k8 y$ M; ~- Z% V
- + this.controller.listen(
# q N" u0 `* J# n7 y - + this.controller.document,
, N0 w5 |8 u! G" S - + Mojo.Event.dragStart,) N% K% Y" g" n6 S" E q) y3 i# r
- + this.handleDragMapStart.bindAsEventListener(this)( \4 g3 R7 g) _
- + );
$ l2 w: ~) A7 H2 Z0 \+ t: ^ - + this.controller.listen(
4 X7 P# B6 _1 x6 K' G. J - + this.controller.document,
! L5 R9 S% K! b( ~8 q) |& p0 {9 r - + Mojo.Event.dragEnd,8 z$ X6 Q/ E( s8 V W0 ]
- + this.handleDragMapEnd.bindAsEventListener(this)
" H& b1 x& m% F1 ]1 c: @ - );
5 M" M) w- X6 @# d! F6 i: W -
" l% M0 W- x+ T8 D - // Pan to where you tap.1 A: |6 U L/ R2 h2 C4 T
- @@ -172,6 +180,9 @@
) p, I' ~% d2 x! G3 M# W4 C3 o - // - GAFC -: S5 M7 X6 c+ T
- this.LAT = (25.213604 + this.offset_lat).toFixed(6); // 22.698998 -shuitian lat-: q! c0 G* x' L f8 D- ]
- this.LON = (110.285375 + this.offset_lon).toFixed(6); // 113.961740 -shuitian lng-
3 F9 C/ e# g. S4 `- E( O - +
# a1 D6 t, o# A) A4 u1 e - + this.dragStartCentX = this.dragStartCentY = 0;7 ?$ R: H7 W( ^0 i, O2 L. m
- + this.initDragX = this.initDragY =0;# T8 z9 u- N9 r8 D
-
$ ?0 V" h- i L5 m; z1 j - // the cache point of your last location & zoom level- I6 A) R* G/ o# E
- this.cachePointCookie = new Mojo.Model.Cookie("cachePoint");( ~; Y. y; B# j% A
- @@ -656,33 +667,68 @@
$ P; c% v1 E: H% q1 d' b - handleGestureStart : function(evnet) {- w4 Q6 h) b/ w' d
- // Stop listen while we zoom in/out the map.8 p5 l- f) f0 J: {0 @
- this.controller.stopListening(this.controller.document, Mojo.Event.tap, this.handleTap);
' @% O" Z8 e3 {+ B - + this.controller.stopListening(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));
# ~$ X& a; E- b2 E$ E3 V- }1 ? - + this.controller.listen(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this));
- h) q2 t" q2 D1 U* V R - + this.controller.listen(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));
$ c5 i1 v" r/ \7 d! d0 y - this.controller.get("cross").innerHTML= "+ <font size=-2>" + this.zoomLv + "</font>";
+ g& V( ]" M8 X: M x3 Q - },7 R+ r8 h3 q5 T0 R4 N1 U7 I2 V/ X6 h
- * G% h3 H$ W( \2 W
- handleGestureChange : function(evnet) {+ e9 ]; Z6 s1 ^6 q
- - this.controller.get("cross").innerHTML= "+ <font size=-2>" + Math.round(this.zoomLv*evnet.scale) + "</font>";2 j# y4 o* h" M( i# |
- + this.controller.get("cross").innerHTML= "+ <font size=-2>" + Math.round(this.zoomLv * evnet.scale) + "</font>";0 {; Z# @4 P( A+ Z' b: `
- },
) K) @; r, x6 a+ X- ~ - 8 I( a) L4 }, E' f
- handleGestureEnd : function(evnet) {+ G* k! k( m2 s# j) z" T7 K
- - this.zoomLv = Math.round(this.zoomLv * evnet.scale);
/ y& S) H- s+ V) M$ ~3 L/ { - - if (this.zoomLv >= 18) this.zoomLv = 18;" n: W. P. ~: x* H1 t
- - if (this.zoomLv <= 1) this.zoomLv = 1;& ^. b8 C; n8 R
- - this.map.setZoom(this.zoomLv);5 I$ X! `' _6 y6 z
- + if (event.scale != 1){3 E+ P, I) s2 q$ ?- E" E
- + // If scale has been changed, zoom to a level that you want.
) F, B$ a7 f! v# X - + this.zoomLv = Math.round(this.zoomLv * evnet.scale);! U$ m- o; q! Y: L ^
- + if (this.zoomLv >= 18) this.zoomLv = 18;
9 @% n* U% j! R! I# A' U& i# C* K F2 P - + if (this.zoomLv <= 1) this.zoomLv = 1;
! E- N+ f: e) P) g, S* m1 j - + if (! this.isTracking){6 V& Y n( G) n4 v6 I" X
- + delete this.point;
3 X5 Y. Z0 H9 q9 Y7 w& i9 X - + this.point = this.map.pixelToPoint(new BMap.Pixel(event.centerX, event.centerY));
2 Q: h: n3 y8 F9 d - + // Tell our global VARs the map has been changed.
0 y( a& D: ~; k8 `7 Z6 T. V# H - + this.offsetX = this.offsetX + (this.point.lat - this.LAT);
. }0 U. P: r8 ^( N- H' U* V1 d - + this.offsetY = this.offsetY + (this.point.lng - this.LON);9 e7 I' R8 A1 r; i' ]8 \ C9 x
- + this.LAT = this.point.lat;+ r% g- n ^* u$ j
- + this.LON = this.point.lng;
8 z$ M3 g4 |! c& }. d0 F2 ~ - + this.map.centerAndZoom(this.point, this.zoomLv);0 R' H! E, A* n) n4 n
- + } else {
9 @! X& }7 O ?* }& P- F) { - + this.map.setZoom(this.zoomLv);
3 f" S+ R% g1 ^. r( H$ Y1 j - + }
! T2 T, O) C. s. U# L) p - + } else {3 `; _1 q7 s1 |
- + // Zoom out if you tap screen with tow fingers at the same time.
- a, L( W8 G& i, Z - + this.zoomLv -= 1;. c9 V' o4 I! b+ X- H4 V6 @
- + if (! this.isTracking){* g7 D7 W$ `3 w
- + delete this.point;
* m* `# @+ v8 K$ N) r! p5 `$ E - + this.point = this.map.pixelToPoint(new BMap.Pixel(event.centerX, event.centerY));; p8 {; v$ W. [8 Y3 }- v
- + // Tell our global VARs the map has been changed.
* F1 D5 M' E \$ _# A - + this.offsetX = this.offsetX + (this.point.lat - this.LAT);
' p+ n9 X% J; C1 Y - + this.offsetY = this.offsetY + (this.point.lng - this.LON);
) I* t, ~5 j8 S( `' L - + this.LAT = this.point.lat;
, \. ~# k/ z! u; i1 E3 g$ `* n - + this.LON = this.point.lng;
7 M Y/ p/ s3 _& E: l9 f" L - + this.map.centerAndZoom(this.point, this.zoomLv);. V' W/ m% u3 [
- + } else {# ^3 A7 k: u/ {+ G% N% r. @
- + this.map.setZoom(this.zoomLv);* m0 n& b' v& s, f9 O3 U
- + }+ H% K9 W y6 u' ~
- + }* O8 T) t( r$ l( ~% r
- this.controller.get("cross").innerHTML= "+ <font size=-2>" + this.zoomLv + "</font>";/ ]3 K7 u! }6 E
- setTimeout(
. V$ G) T3 ?. _8 U2 `' b1 D - function(){' r1 t4 T' z$ ]2 V# p
- this.controller.get("cross").innerHTML= "+";
* Y& t- Z, @4 W5 ]: D8 S% Z - },
4 s! y8 [; H' u6 r6 |% k, v - 2000);1 D+ o8 n2 ~' w1 f5 \5 T
- -
% L( J5 R% r/ y4 c( h8 y8 G - // Relisten when zoom in/out ends.
; h% U* _% q& y4 Z* ?1 I - this.controller.listen(this.controller.document, Mojo.Event.tap, this.handleTap.bindAsEventListener(this));
7 Q4 o8 U0 v* Z @! N1 G a# r7 N) j - + this.controller.listen(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));
# `* K9 K) K$ a& q6 H0 c) B( x. r) p - + this.controller.listen(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this));! [, e* ]7 _# v
- + this.controller.listen(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));
# k2 S% v8 C8 s$ {8 L: L W - },
) i) m0 c: G b+ v5 A. T6 g! y. T( ` -
* r A- m* `, f& x( C9 t - handleTap : function(evnet) {
8 u) k$ H. S9 ?. R9 q - if (event.count == 2){7 ~# |6 L* ?9 V8 Z+ s6 M# ^4 F
- // Stop tracking, and pan to where you tap. T- G2 ~$ H6 g! d: H3 v
- this.stopTracking();/ w8 u; ~0 C+ t* c6 T- I
- + delete this.point;
) q. u, G% t6 M" n4 Z- y$ s - this.point = this.map.pixelToPoint(new BMap.Pixel(event.down.x, event.down.y));
* a8 l* [3 b* U; |- ] - $ N% J8 _. _# O" i* f6 H
- // Tell our global VARs the map has been changed.
( [! P( {) {2 |2 t - @@ -690,10 +736,8 @@
% J6 d& z8 Q3 H$ w6 H: O - this.offsetY = this.offsetY + (this.point.lng - this.LON);
; x2 U7 N9 `4 ^" V Z9 i - this.LAT = this.point.lat;
! p, ~! |/ B+ K4 }$ z; K- p/ D - this.LON = this.point.lng;3 H1 a# y7 S( ~( u! V
- - this.map.panTo(this.point);. X) N5 l5 _# L8 N E& j a, p& F
- - Mojo.Log.info("this.zoomLv>>>>>>>>"+this.zoomLv);1 g' X9 n: G/ l' Q
- - Mojo.Log.info("PanTo>>>>>>>>"+this.LON+","+this.LAT);
9 Z% I* {; H8 I* f. L! ]5 | - - Mojo.Log.info("offsetXY>>>>>>>>"+this.offsetX+","+this.offsetY);# D8 o. U# F+ B6 J! b) v& I
- + this.zoomLv +=1;: ~$ u& S2 F8 S
- + this.map.centerAndZoom(this.point, this.zoomLv);
% i8 f0 ~" W- p) T: G( e -
- {% V( E" i6 Z3 Z' ~ - // Double tap on the screen will hide the search widget./ {: O2 D" i( o, E/ ^ `
- this.searchElement.style.display = "none";
& ^2 o/ a4 m3 H - @@ -703,7 +747,38 @@4 H- _+ Z1 c8 f e4 a( c
- this.controller.get("infopad").style.display = "none";
* n7 R# u, j) b# ]- n - }
8 H+ Q: {1 Y. h) x9 t8 G( ? - },
+ o2 L) m: Y P - - $ G, z; P) w' e& l. C3 a
- +* n8 C! z7 g) g# s- |
- + handleDragMapStart : function(event) {
" b* Z& L& a: ^ T - + this.getDragStartPixel(event.down.x, event.down.y);
( W0 s3 V( y! c) q3 u. b0 `* [ - + },/ d- c. G7 `. y& a
- +
' W5 u h6 F7 | B - + handleDragingMap : function(event) {
# q: w* ~ b4 H# x% w+ U - + this.captureNewCenter(event.move.x, event.move.y);
% {8 J& z0 M4 o6 l - + },: @0 B! c. [9 H' q, J
- +; I) H! p3 ^2 x9 H. k! E/ }
- + handleDragMapEnd : function(event) {' E& X: I1 i$ G7 V- m+ Q
- + clearTimeout(this.delayMapPanning);
+ H# H8 i+ l# s9 d; H% i - + },& P0 H# z; J' U
- +# T" O" K! A0 v- f
- + getDragStartPixel : function(x, y){* ?/ u, I1 T8 W8 ^" W% o, W7 u
- + this.dragStartCentX = this.map.pointToPixel(this.map.getCenter()).x;
) P% f0 R! p3 B - + this.dragStartCentY = this.map.pointToPixel(this.map.getCenter()).y;6 }. U2 d5 A. [5 Y" p6 h
- + this.initDragX = x;
) p$ q5 d* l8 ~) l - + this.initDragY = y;. A( S( Z i0 G
- + },) Z$ C' D6 ^$ i, E
- +
. U, O$ j! K1 y - + delayMapPanning : function(){
7 h+ O) |; k5 { @; h" P - + this.map.panTo(this.point);0 c2 Z' l/ \5 l9 F a4 T
- + },
. h6 @" c% e. H. A0 [: ]* X - +
' {" X# q8 T* u6 X% A& ]3 y - + captureNewCenter : function(x, y){/ w/ T. S0 H* k: |( n0 W
- + delete this.point;2 v; X4 d L1 D* |
- + this.point = this.map.pixelToPoint(new BMap.Pixel(this.dragStartCentX + x - this.initDragX, this.dragStartCentY + y - this.initDragY));
6 ~. ?/ q( V- ~& P - + this.LAT = this.point.lat;- U1 a p+ w5 k( C2 H5 W! b6 t
- + this.LON = this.point.lng;
$ V4 o" K) @; f7 n0 H* @% c - + this.delayMapPanning();9 p( G! i2 {# R; J& E
- + },
$ B( Y# t9 V7 q& v8 W, e - +$ d. S! ]7 v/ W! A: G
- closeInfoWindow : function(T) {4 z" O+ }8 H! i
- // close info window in T seconds.
" t! x* _4 O6 u1 | ~# A - setTimeout(this.map.closeInfoWindow(), T*1000);
6 L' [+ d2 [1 O. g7 x - @@ -726,7 +801,9 @@4 A9 I3 {9 [# T) \2 u; [2 ^+ j4 @
- this.controller.stopListening(this.controller.document, "gesturechange", this.handleGestureChange);: j9 x# _) S4 p% }% Z4 j
- this.controller.stopListening(this.controller.document, "gestureend", this.handleGestureEnd);, @# W$ P$ N* T* w
- this.controller.stopListening(this.controller.document, Mojo.Event.tap, this.handleTap);
0 H1 C7 D# Y5 m j$ ^7 U - - 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) );6 | ~+ s0 p1 s- K# a) ]* Q0 ~$ U* `
- + this.controller.stopListening(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));
( ^" E; j: u% R' ~, N3 [ - + this.controller.stopListening(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this));
( h( [" @. F* c& M1 O: F* p, H& R - + this.controller.stopListening(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));! Q/ H2 w; k0 E$ ?0 d
- }
/ N* E& ~' t, y3 ?" w) X+ K - };* c- K- @9 [! B: u7 `! x! _
- }());9 r5 g! V# P+ Q+ b
- \ No newline at end of file6 F8 x8 ^4 x8 f$ _
- divilis@DIVILIS-GentooLinux /mnt/1T2 $
2 m" G; r% ]' V/ Q; R4 [
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？加入我们
×
|
|Archiver|手机版|小黑屋|吹友吧
( 京ICP备05078561号 )
狗仔卡
: P5 T4 }, ?- [
显身卡
发表于 2011-8-23 01:20
发表于 2011-8-23 08:53
