|
|
楼主 |
发表于 2011-8-25 02:17
|
显示全部楼层
本帖最后由 divilis 于 2011-8-26 01:11 编辑 $ R7 Q5 f9 {6 ?$ A
* G. T' m& r: v- L4 \
拖动地图的实现方式及代码.
3 S& ?; I( b' @, M( p( H
9 o; F0 y8 r' d9 u
3 o( F0 P5 I5 X8 I5 }7 Z# j& _& c& W' h
- divilis@DIVILIS-GentooLinux /mnt/1T2 $ diff -Naur ./mapsbody-assistant_v1.2.6.js ./mapsbody-assistant_v1.2.7.js
* k/ v4 S. \' o& t - --- ./mapsbody-assistant_v1.2.6.js 2011-08-23 04:24:13.000000000 +08009 d2 `( P7 I7 x1 V( ?1 L/ D
- +++ ./mapsbody-assistant_v1.2.7.js 2011-08-25 01:29:56.000000000 +0800
) g3 v! t' h, N# I' r6 q - @@ -47,7 +47,7 @@- R! R2 y' f; U' Z M0 x5 `/ t \! a
- { visable: true} ,5 _# W3 F" b& y7 m
- { items: [ 7 z3 v3 b5 i" N! A7 F
- { icon : "search" , command : 'enterKeyword'},
( @" W4 b! z0 C& _/ q* m( k5 U - - { label : "Me", command : 'panTome' }2 y9 E3 a: t1 f! l3 G [ J K5 Z
- + { label : "M", command : 'panTome' }
) J7 t; r) K3 W' _$ `2 M" \9 I1 N4 | - ]}# Z* F* n# h8 x, M- z2 J
- ]
7 k" t: G( a2 M+ W/ B3 w - };
% [. X8 I5 Z2 l4 \+ X$ R - @@ -116,13 +116,21 @@, h" L) K* Z( q
- this.handleGestureEnd.bindAsEventListener(this)
4 f3 B7 b4 G, l9 K, {9 Q" X( p - );
% `' U S: q) k+ v" q. I -
c0 i. n& L4 U - + // I want to handle the Drag event.
# |3 {. A7 x; ~ - this.controller.listen(3 R3 M- |9 X" f; U! H
- - this.controller.get("infopad"),. s L" k' A, r' p6 G) g
- - Mojo.Event.tap,
4 F+ h% j, I) e - - function(event){7 _7 y' K/ M- p* k
- - if (event.count == 3)! j' C' ~' Q1 q' H$ t
- - this.controller.get("infopad").style.display = "none";
; W" D+ Z& z4 z. y5 _( d - - }.bindAsEventListener(this) G+ {, b& m$ c6 ~( S# O
- + this.controller.document,
: `2 t7 c( h* y! ~; h - + Mojo.Event.dragging,
% X( Z# v# b9 K c5 H - + this.handleDragingMap.bindAsEventListener(this)
; }4 ^; n- V/ }$ I- h - + );
6 e# S" ^+ }* g( X8 G: r: c - + this.controller.listen(
9 a5 Z0 a/ s: o/ y% |& l: X$ b - + this.controller.document,1 e! T7 J0 ?; ^- _5 q
- + Mojo.Event.dragStart,
$ x9 c/ c5 o p; Q1 {1 U$ Z, v- G - + this.handleDragMapStart.bindAsEventListener(this)) y8 v. @' X* z) T; w4 z; \
- + );
7 ]8 O6 R7 i5 n; }2 V8 O4 M - + this.controller.listen(9 q7 u9 i u3 q; \" L- ?' Y5 n
- + this.controller.document,
5 E+ ^! U F9 a" }/ u$ ^+ B* [ - + Mojo.Event.dragEnd,
- I" h9 W Q+ `( L. \4 `$ k - + this.handleDragMapEnd.bindAsEventListener(this)
# k) s! P4 ~- c0 B - );
7 U( Z f" K, N8 T* \ - ' n0 p, f5 W6 B( J
- // Pan to where you tap.
/ Z6 D6 V! @2 H - @@ -172,6 +180,9 @@# D' \" B% r! |( e K$ ]' a
- // - GAFC -7 x+ {/ W( w3 K9 V P
- this.LAT = (25.213604 + this.offset_lat).toFixed(6); // 22.698998 -shuitian lat-
; Y3 N. {* L7 q! s - this.LON = (110.285375 + this.offset_lon).toFixed(6); // 113.961740 -shuitian lng-
4 e, i1 I# r' T# S - + 9 ~9 Q% ~! b% A j3 u
- + this.dragStartCentX = this.dragStartCentY = 0;6 s4 i, W$ }. i/ K
- + this.initDragX = this.initDragY =0;7 ]3 F4 N; ]1 b5 q3 ]4 C
-
: z8 @' d0 w( D! P/ Z - // the cache point of your last location & zoom level' W: E1 A: V# I6 d) X! W
- this.cachePointCookie = new Mojo.Model.Cookie("cachePoint");
' T( P6 D* Z6 o2 n7 [- o' N - @@ -656,33 +667,68 @@
, H, C; W* q/ y* ?; I - handleGestureStart : function(evnet) {3 M' V' g% u z# k+ k; _* y% t/ L5 C
- // Stop listen while we zoom in/out the map.
4 ?* A% d' e7 B* ~/ r - this.controller.stopListening(this.controller.document, Mojo.Event.tap, this.handleTap);
& h3 A* |2 f5 B" a8 l$ Y - + this.controller.stopListening(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));! b& e Z7 C, K% O, o+ O) [$ x) h
- + this.controller.listen(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this));
7 _0 H$ d# E' h1 X. x' D - + this.controller.listen(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));2 l- b1 {% F# R
- this.controller.get("cross").innerHTML= "+ <font size=-2>" + this.zoomLv + "</font>";
! I A+ c( T% }- B4 [ - },
- A0 e7 U- U1 ` -
8 y! O: R# U+ w8 N( L - handleGestureChange : function(evnet) {0 v3 `) L6 S% d8 I& h9 s( m2 z
- - this.controller.get("cross").innerHTML= "+ <font size=-2>" + Math.round(this.zoomLv*evnet.scale) + "</font>";
) l; b2 ^" T6 G5 P( `6 |- X - + this.controller.get("cross").innerHTML= "+ <font size=-2>" + Math.round(this.zoomLv * evnet.scale) + "</font>";
# W; E4 c. E" i" S4 O! m k - }," Z7 R" H8 L% ?3 c6 Z# s
-
1 A$ _3 l) Z$ k4 h. S7 p( S/ u( H8 N - handleGestureEnd : function(evnet) {6 h( X) `9 U- r" q
- - this.zoomLv = Math.round(this.zoomLv * evnet.scale);. Z! Q0 ^* m% N' [+ |
- - if (this.zoomLv >= 18) this.zoomLv = 18; f: M+ U) N3 b! a( g
- - if (this.zoomLv <= 1) this.zoomLv = 1;
! w) \0 R/ o4 }2 D - - this.map.setZoom(this.zoomLv);* w1 b! D( Z: Z1 ]
- + if (event.scale != 1){, O5 A/ i& \+ K3 B$ l" c; D/ l
- + // If scale has been changed, zoom to a level that you want.
+ A2 M m! L. s - + this.zoomLv = Math.round(this.zoomLv * evnet.scale);# N, d7 X% f# y ]8 ]
- + if (this.zoomLv >= 18) this.zoomLv = 18;# n! r' ^6 ]: `
- + if (this.zoomLv <= 1) this.zoomLv = 1;0 R( E' L2 p: v; g$ S' R, q, z" S9 V
- + if (! this.isTracking){+ u6 p$ R2 u/ D8 v. {2 Z Q# |
- + delete this.point;
w- R- l0 v2 P/ S! D; V) l - + this.point = this.map.pixelToPoint(new BMap.Pixel(event.centerX, event.centerY));4 w; T, R, J' D9 U. S! w2 O
- + // Tell our global VARs the map has been changed.
6 T8 j( {* @) _5 r6 F - + this.offsetX = this.offsetX + (this.point.lat - this.LAT);* O- V/ h4 b1 R' ]' i
- + this.offsetY = this.offsetY + (this.point.lng - this.LON);
- U# ^) b4 \! s V- z - + this.LAT = this.point.lat;) n/ W7 c# N/ d4 z9 C
- + this.LON = this.point.lng;( G: S2 ~2 F8 |! W! m$ j
- + this.map.centerAndZoom(this.point, this.zoomLv);
8 R) r8 N9 k/ E7 e - + } else {
7 J& I. W7 b, W2 W0 v- j! Z - + this.map.setZoom(this.zoomLv);; b* O8 s9 p1 O
- + }
) H5 M2 l& f9 U, [+ Z - + } else {) X# c- C& L, z; h7 p3 [
- + // Zoom out if you tap screen with tow fingers at the same time.( w" i# d7 Y# K7 \' s
- + this.zoomLv -= 1;; e J1 {2 K% I- a% U% p
- + if (! this.isTracking){
' j( V) A; `5 n8 I1 [0 ^$ c - + delete this.point;
) s% b) b' t/ H( o5 I - + this.point = this.map.pixelToPoint(new BMap.Pixel(event.centerX, event.centerY));
+ O' n: S ^4 L" Z - + // Tell our global VARs the map has been changed.
' ^0 v. a+ l& G0 d7 J" {& | _ - + this.offsetX = this.offsetX + (this.point.lat - this.LAT);
" Z0 \0 l4 p% D& s& q3 E3 x - + this.offsetY = this.offsetY + (this.point.lng - this.LON);
" A) ~1 [& {+ f, ` - + this.LAT = this.point.lat;
! j1 f6 V( L" @5 U5 O' ]' U - + this.LON = this.point.lng;+ @$ }: _! f6 P. ~# Z7 A2 [8 `
- + this.map.centerAndZoom(this.point, this.zoomLv);' h3 J3 H& h' n2 z) e
- + } else {
3 u; X _4 S5 l1 K3 h - + this.map.setZoom(this.zoomLv);. t* U( m' ]' X" w; |, R
- + }" b* F. O+ k' j7 J2 t, T
- + }7 W) l, S' r/ y) o+ D
- this.controller.get("cross").innerHTML= "+ <font size=-2>" + this.zoomLv + "</font>";9 B& [) ?( u1 t9 y
- setTimeout(0 p. T" p# L6 b% V, J6 G6 g
- function(){
% @* }9 t9 v! \3 u" k - this.controller.get("cross").innerHTML= "+";
6 T. t7 L# v! A; v8 s+ N$ B - },
* x. [) a! w+ n0 E7 J - 2000);6 r) \5 t* g- t; f
- - ! V% q" O! G8 d3 m' m
- // Relisten when zoom in/out ends.3 H% L: {' U% C$ T, j
- this.controller.listen(this.controller.document, Mojo.Event.tap, this.handleTap.bindAsEventListener(this));
) S8 {4 u/ h4 E. M9 V" u - + this.controller.listen(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));
5 g( y8 K/ q+ e - + this.controller.listen(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this));& `+ n Q0 P8 u
- + this.controller.listen(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));
, d5 X& i- R7 x8 ]% D - },# K1 U% G$ f h/ P8 y$ [2 V
- . X+ b1 ?' a5 z. C( p' \
- handleTap : function(evnet) {
+ q! C4 ?( _) ?/ Y - if (event.count == 2){! L# H: d/ p2 y9 A9 M# `
- // Stop tracking, and pan to where you tap.
- q2 X! a% _! T6 g7 {- Y$ ~ ] - this.stopTracking();! O( V3 }( T! E7 L& S3 @$ k
- + delete this.point;
1 z; U. M, C$ H7 _; _3 a( d - this.point = this.map.pixelToPoint(new BMap.Pixel(event.down.x, event.down.y));( {( {7 P( d- q+ T/ C- N
- - h7 a8 L) d- J2 ^
- // Tell our global VARs the map has been changed.6 V! \! D z" G! a+ J1 Z; U: Y# l5 F
- @@ -690,10 +736,8 @@
. F% z2 K7 j' k; w) i - this.offsetY = this.offsetY + (this.point.lng - this.LON);
$ |9 B% N; y/ b6 t1 x, I- ` - this.LAT = this.point.lat;
/ ]7 W/ G+ m/ Q - this.LON = this.point.lng;- l( T. t h0 x" j
- - this.map.panTo(this.point);6 h' j9 i5 ?" N; M- U- M
- - Mojo.Log.info("this.zoomLv>>>>>>>>"+this.zoomLv);
8 C/ l+ h6 s: D+ a$ s - - Mojo.Log.info("PanTo>>>>>>>>"+this.LON+","+this.LAT);; O4 J' I6 U9 Y/ o3 A
- - Mojo.Log.info("offsetXY>>>>>>>>"+this.offsetX+","+this.offsetY);% s9 @5 }* @) q W* H4 L
- + this.zoomLv +=1;
( y7 c7 |: x/ R" O( ? - + this.map.centerAndZoom(this.point, this.zoomLv);
6 `, k9 l5 a6 b+ e% N( \ -
; y7 S7 u, I% v+ O! z - // Double tap on the screen will hide the search widget.0 U0 |3 R2 Z t1 ^) L% N
- this.searchElement.style.display = "none";
3 {8 g* K4 ]' o - @@ -703,7 +747,38 @@- q% p9 i1 s# d- n# q8 W. {6 ?0 Q
- this.controller.get("infopad").style.display = "none";2 j6 ]; S& S; f- `
- }1 ^6 W, j) j8 Q' z
- },
2 o1 u1 n1 J, W/ X6 @; d0 y - - 8 H/ y6 m+ i! {- E, D3 T- A
- + R$ T* s8 S+ h/ f: F
- + handleDragMapStart : function(event) {# R `* ` T: K8 }
- + this.getDragStartPixel(event.down.x, event.down.y);
$ g8 ^7 f- V" J2 O - + },
" N# Q, `* D( L Q7 m - +
( W9 T! j8 X% i% H- |7 J3 l - + handleDragingMap : function(event) {
0 l) h; r2 n& C4 C - + this.captureNewCenter(event.move.x, event.move.y);
I: }* m- X0 ` - + },
- l8 h0 `( p. {& s1 X - +4 F: B: g: O9 k+ i
- + handleDragMapEnd : function(event) {2 K8 X& X' W/ P& u
- + clearTimeout(this.delayMapPanning);6 h) M8 c. b2 p
- + },
. D) a: p2 e# e9 |7 ~) c# ?! H - +
! D+ n2 ^# ^& R7 C. ^% t - + getDragStartPixel : function(x, y){
5 {7 o k! X- B: y) w% V - + this.dragStartCentX = this.map.pointToPixel(this.map.getCenter()).x;
& z2 f, _0 G: z* p+ v - + this.dragStartCentY = this.map.pointToPixel(this.map.getCenter()).y;
1 T& N* e: D5 m% Z - + this.initDragX = x;
/ y: }# z" X5 L; Q# Y ~3 v - + this.initDragY = y;
4 r0 T- q. _- m+ M n6 `+ ` - + },8 \- v" k' z: b( ]# l' f# }8 V/ q
- +
7 g; w' D, w/ A3 @( f9 C$ }# V# O - + delayMapPanning : function(){
5 r/ a+ n4 }4 y) T* x+ L - + this.map.panTo(this.point);+ Y# a& S) U/ n
- + },
5 m( s5 G$ |- @ - +
. L+ s* S7 g7 z; r, [( U$ K, [ - + captureNewCenter : function(x, y){! V K7 w9 x& c5 W- t% m
- + delete this.point; {8 Q% P) u* q
- + this.point = this.map.pixelToPoint(new BMap.Pixel(this.dragStartCentX + x - this.initDragX, this.dragStartCentY + y - this.initDragY));
' @ w) B, v2 e+ [( x U. R - + this.LAT = this.point.lat;; v4 K! O' F# b. J ~ \
- + this.LON = this.point.lng;
; J5 D4 J/ U% {) @ - + this.delayMapPanning();" h- {2 E; U. u" m8 x
- + },) ]$ z/ }/ d& n4 U7 e
- +
6 w# y" b/ R, Y( p- j, H; Y - closeInfoWindow : function(T) {
7 T/ |7 N; w8 `# Q - // close info window in T seconds.& H' X8 f$ y; v; t* p
- setTimeout(this.map.closeInfoWindow(), T*1000);
+ C5 ^7 D' Z; t* k% t+ v - @@ -726,7 +801,9 @@' w: T9 e% D- @! e I
- this.controller.stopListening(this.controller.document, "gesturechange", this.handleGestureChange);
6 g; K: i, |) A( [' p' o0 a - this.controller.stopListening(this.controller.document, "gestureend", this.handleGestureEnd);
$ X4 O2 _4 ?7 y0 v2 j' L/ F - this.controller.stopListening(this.controller.document, Mojo.Event.tap, this.handleTap);
: Z8 S3 Q6 t7 X# p - - 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) );
4 U$ W4 e, z) O; s - + this.controller.stopListening(this.controller.document, Mojo.Event.dragging, this.handleDragingMap.bindAsEventListener(this));
) A% j$ D" A9 r& h% E7 V/ U - + this.controller.stopListening(this.controller.document, Mojo.Event.dragStart, this.handleDragMapStart.bindAsEventListener(this));9 m( r# p6 A$ D% C! J
- + this.controller.stopListening(this.controller.document, Mojo.Event.dragEnd, this.handleDragMapEnd.bindAsEventListener(this));5 c4 @( [" a8 T* F# _
- }
) O1 j3 i. P! Z8 b7 e6 K - };
: q# m. J x6 y* ]" [( i" v. I, v - }());( Z( k: s+ O8 P( I8 O
- \ No newline at end of file/ A" _7 ?& v; V" M
- divilis@DIVILIS-GentooLinux /mnt/1T2 $
+ G$ Q8 w! `- q5 Q! ?6 u
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？加入我们
×
|
|Archiver|手机版|小黑屋|吹友吧
( 京ICP备05078561号 )
狗仔卡
+ e# O1 S8 r# @! T/ ^
显身卡
发表于 2011-8-23 01:20
发表于 2011-8-23 08:53
