It's a NTHU Course Slide

1. Google Map
1 Ronald
Hsu
100062595
@
MIRLab
h7p://about.me/hothero
20120417
12年4月17日星

2. Outline
¢Google
Map
— Closure
— Func5onal
programming
— Assignment
— Related
Applica5ons
DEMO
¢Javascript
Encoder
&
Packer
2
12年4月17日星

3. Google
Map
v3
¢Client
Loca5on
¢Direc5on
s
¢GeoCode
r
¢Marker
¢Event
3
12年4月17日星

4. Get
Started
CSS(Op5onal)
include
external
javascript
4
12年4月17日星

5. google.maps.LatLng
¢latLng
=
new
google.maps.LatLng(la5tude,
longitude);
//
ini5aliza5on
¢Some
methods
— equals(other:LatLng)
//
comparison
func5on
— lat()
— lng()
— toString():
"(-­‐34.397,
150.644)"
— toUrlValue(precision?:number):
"-­‐34.397,150.644"
¢DEMO:
h`p://goo.gl/iE7YY
5
12年4月17日星

6. MapType
6
12年4月17日星

7. Client
Loca5on
¢Add
another
external
javascript
library
or
use
another
sample
from
“Code
Samples”
— src="h`p://www.google.com/jsapi"
¢Get
client
loca5on
from
google.loader
and
center
map
to
there.
¢DEMO:
h`p://goo.gl/NIVU
7
12年4月17日星

8. google.maps.Marker
MarkerOp5ons
wrapped
by
braces
{}
¢Some
proper5es
— anima5on
— icon
— map
— posi5on
— 5tle
— zIndex
¢DEMO:
h`p://goo.gl/3PRpO 8
12年4月17日星

9. Event
¢Concept:
— Closure
— Func5onal
Programming
¢Sample:
place
a
marker
on
client
loca5on
— h`p://mirlab.org/users/ronald.hsu/
web_course_demo/clientMarker.html
9
12年4月17日星

10. JS
Advanced
Concept
¢Closure
— Wikipedia:
In
computer
science,
a
closure
(also
lexical
closure
or
func5on
closure)
is
a
func5on
together
with
a
referencing
environment
for
the
non-­‐local
variables
of
that
func5on.
[1]
A
closure
allows
a
func5on
to
access
variables
outside
its
immediate
lexical
scope.
¢Func5onal
Programming
— Extended
Reading:
h`p://www.slideshare.net/
ihower/fp-­‐osdc2012v2
10
12年4月17日星

11. Closure
&
Func5onal
Programming
¢fffff Closure
Call
by
reference
Func5onal
Programming
¢h`p://jsfiddle.net、h`p://jsbin.com/
11
12年4月17日星

12. Closure(Cont.)
h`p://goo.gl/X`HA
Call
by
reference
12
12年4月17日星

13. Func5onal
Programming(Cont.)
Rename
Call
by
func5on this
func5on 13
12年4月17日星

14. Func5onal
Programming(Cont.)
Anonymous
Func5on
Callback
func5on
¢More:
Node.js
、Meteor(Server-­‐side) 14
12年4月17日星

15. Google
Map
v3(Cont.)
¢Direc5ons
¢GeoCoder
15
12年4月17日星

16. DOMListener
&
GeoCoder
¢My
version:
¢DEMO:
h`p://goo.gl/v8AtJ 16
12年4月17日星

17. Direc5on
/
Route
BICYCLING,
WALKING
For
showing
(or
polyline)
¢DEMO:
h`p://goo.gl/zfvkk 17
12年4月17日星

18. MarkerCluster
¢DEMO:
h`p://goo.gl/8iWs
18
12年4月17日星

19. Reference
Usage
(Other
parts
of
GMap)
¢h`ps://developers.google.com/maps/
¢Developer’s
Guide
— Services
— Libraries
¢API
Reference
¢Code
Samples
&
More
Resources(Advanced)
¢Another
alterna5ve:
an
open
source
project
“OpenStreetMap”
19
12年4月17日星

20. Assignment
¢h`p://mirlab.org/users/ronald.hsu/
web_course_demo/homework.html
20
12年4月17日星

21. Dic5onary
/
Hash
Table
1
var
ipeen_hsinchu
=
{};
ipeen_hsinchu[0]
=
{};
ipeen_hsinchu[0]["name"]
=
"均鎂糕餅公司";
ipeen_hsinchu[0]["address"]
=
"新竹縣竹北市文平路302號";
2
var a = {};
a[0] = {"name": "test",
"number": 3};
alert(a[0].number);
21
12年4月17日星

22. DEMO
¢Joytrip
¢Spotmap
¢Anyweather
— h`p://anyweather.hothero.org/
22
12年4月17日星

23. Javascript
encoder
¢h`p://dean.edwards.name/packer/
、
h`p://
javascriptcompressor.com/
— Prac5cally
¢h`p://uv-­‐8.jp/public/aaencode.html
— For
fun
¢More:
h`p://goo.gl/JKvqC
¢Keyword:
Obfuscator,
obfusca5on,
compiler,
encoder,
...
etc.
23
12年4月17日星

24. Thanks
for
your
listening
¢Q
&
A
24
12年4月17日星