Google map slide
Upcoming SlideShare
Loading in...5
×
 

Google map slide

on

  • 987 views

It's a NTHU Course Slide

It's a NTHU Course Slide

Statistics

Views

Total Views
987
Views on SlideShare
987
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Google map slide Google map slide Presentation Transcript

  • Google Map 1 Ronald  Hsu  100062595  @  MIRLab h7p://about.me/hothero 2012041712年4月17日星
  • Outline ¢Google  Map   — Closure — Func5onal  programming — Assignment — Related  Applica5ons  DEMO ¢Javascript  Encoder  &  Packer 212年4月17日星
  • Google  Map  v3 ¢Client   Loca5on ¢Direc5on s ¢GeoCode r ¢Marker ¢Event 312年4月17日星
  • Get  Started CSS(Op5onal) include  external  javascript   412年4月17日星
  • 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 512年4月17日星
  • MapType 612年4月17日星
  • 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 712年4月17日星
  • google.maps.Marker MarkerOp5ons   wrapped  by  braces  {} ¢Some  proper5es — anima5on — icon — map — posi5on — 5tle — zIndex ¢DEMO:  h`p://goo.gl/3PRpO 812年4月17日星
  • Event ¢Concept: — Closure — Func5onal  Programming ¢Sample:  place  a  marker  on  client  loca5on — h`p://mirlab.org/users/ronald.hsu/ web_course_demo/clientMarker.html 912年4月17日星
  • 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 1012年4月17日星
  • Closure  &  Func5onal  Programming ¢fffff Closure Call  by   reference Func5onal   Programming ¢h`p://jsfiddle.net、h`p://jsbin.com/ 1112年4月17日星
  • Closure(Cont.) h`p://goo.gl/X`HA Call  by  reference 1212年4月17日星
  • Func5onal  Programming(Cont.) Rename   Call  by  func5on this  func5on 1312年4月17日星
  • Func5onal  Programming(Cont.) Anonymous   Func5on Callback  func5on ¢More:  Node.js  、Meteor(Server-­‐side) 1412年4月17日星
  • Google  Map  v3(Cont.)¢Direc5ons¢GeoCoder 1512年4月17日星
  • DOMListener  &  GeoCoder ¢My  version: ¢DEMO:  h`p://goo.gl/v8AtJ 1612年4月17日星
  • Direc5on  /  Route BICYCLING,  WALKING For  showing  (or  polyline) ¢DEMO:  h`p://goo.gl/zfvkk 1712年4月17日星
  • MarkerCluster ¢DEMO:  h`p://goo.gl/8iWs 1812年4月17日星
  • 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” 1912年4月17日星
  • Assignment ¢h`p://mirlab.org/users/ronald.hsu/ web_course_demo/homework.html 2012年4月17日星
  • 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); 2112年4月17日星
  • DEMO ¢Joytrip ¢Spotmap ¢Anyweather — h`p://anyweather.hothero.org/ 2212年4月17日星
  • 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. 2312年4月17日星
  • Thanks  for  your  listening   ¢Q  &  A 2412年4月17日星