Google map slide
2 likes1,073 views
该文档介绍了Google Map V3的使用，包括初始化、定位、标记、事件处理和功能编程等高级主题。文中还提供了相关的示例和链接，说明了闭包及其在功能编程中的应用。该文档还提到了一些编码工具和示例项目，方便读者进一步探索。
![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日星](https://image.slidesharecdn.com/googlemapslide-120425023450-phpapp01/85/Google-map-slide-10-320.jpg)
![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日星](https://image.slidesharecdn.com/googlemapslide-120425023450-phpapp01/85/Google-map-slide-21-320.jpg)
Google map 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日星