Your SlideShare is downloading. ×
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Geolocation and Mapping in PhoneGap applications

10,321

Published on

Geolocation and Mapping in PhoneGap applications …

Geolocation and Mapping in PhoneGap applications

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.

http://www.ivanomalavolta.com

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,321
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
213
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ••
  • 2. navigator.geolocation•••
  • 3. ••
  • 4. geolocation•••
  • 5. getCurrentPosition(win, [fail], [options]);
  • 6. var id = watchPosition(win, [fail], [options]);
  • 7. clearWatch(watchID);
  • 8. •–•–•–•–
  • 9. getCurrentPosition watchPosition
  • 10. CoordinatesPosition
  • 11. •–•–•–
  • 12. •–•–
  • 13. •–•–
  • 14. PositionError.PERMISSION_DENIEDPositionError.POSITION_UNAVAILABLEPositionError.TIMEOUT
  • 15. var options = { maximumAge: 3000, timeout: 5000,enableHighAccuracy: true };navigator.geolocation.watchPosition(win, fail, options);function win(pos) {var el = „<div>Latitude: „ + pos.coords.latitude + </div>);el += „<div>Longitude: „ + pos.coords.longitude + </div>);el += „<div>timestamp: „ + pos.timestamp + </div>);$(„#block‟).html(el);}function fail(err) {console.log(err.code);}
  • 16. google.maps.Map
  • 17. google.maps.Map(htmlElement, options);•–• <div id=“map”></div>•–
  • 18. •–•–•––
  • 19. •–•–•–•–•
  • 20. ••new google.maps.LatLng(42.3606,13.3772);
  • 21. ••var pt = new google.maps.LatLngBounds(new google.maps.LatLng(57.8, 14.0),new google.maps.LatLng(57.8, 14.0));contains(pt), intersect(bounds), getCenter(),union(bounds), etc.
  • 22. mapTypeId: google.maps.MapTypeId.ROADMAP• ROADMAP• SATELLITE• HYBRID• TERRAIN
  • 23. // in your JS filevar options = {center: new google.maps.LatLng(-34.397, 150.644),zoom: 8,mapTypeId: google.maps.MapTypeId.ROADMAP};var map = newgoogle.maps.Map(document.getElementById(“map”),options);// somewhere in your HTML templates<div id=“map”></div>
  • 24. •–– touchend•––
  • 25. addListener()google.maps.event.addListener(obj, eventname, callback)•–•––•
  • 26. addDOMListener(obj, eventname, callback)addListener, obj
  • 27. var map = newgoogle.maps.Map(document.getElementById(“map”),opt);google.maps.event.addListener(map, click,function(event) {var marker = new google.maps.Marker({position: event.latLng,map: map});map.setCenter(marker.getPosition());});
  • 28. ••••
  • 29. •––•––
  • 30. •––•–––
  • 31. •––•–
  • 32. marker = new google.maps.Marker({// options});google.maps.event.addListener(marker, click,callback);
  • 33. google.maps.Marker•– LatLng•– Map– setMap()– setMap() null
  • 34. •– google.maps.Animation.DROP– google.maps.Animation.BOUNCEsetAnimation()•–•–––
  • 35. Polyline LatLngsMarker Polyline
  • 36. •– LatLng•–•–•–•–
  • 37. var map; // the map object (initialization omitted here)var coords = [new google.maps.LatLng(37.772323, -122.214897),new google.maps.LatLng(21.291982, -157.821856),new google.maps.LatLng(-18.142599, 178.431),new google.maps.LatLng(-27.46758, 153.027892)];var polyline = new google.maps.Polyline({path: coords,strokeColor: "#00FF00",strokeOpacity: 1.0,strokeWeight: 1});polyline.setMap(map);
  • 38. •••
  • 39. google.maps.DirectionsService
  • 40. DirectionsServiceDirectionsRequestDirectionsService.route()manageRoutevar dirService = new google.maps.DirectionsService();var request = {origin: ”…”,destination: “…”,travelMode: google.maps.TravelMode.DRIVING};dirService.route(request, manageRoute);
  • 41. – DirectionsRoute–
  • 42. • DirectionsLeg•• LatLngs• LatLngBounds••
  • 43. • DirectionsStep••• LatLng•LatLng••
  • 44. •••• LatLng•LatLng
  • 45.
  • 46. google.maps.DistanceMatrixService.getDistanceMatrix(options, callback)•–•–
  • 47. •–•–•–––•––••
  • 48. • DistanceMatrixResponse• DistanceMatrixStatus
  • 49. •–•–•–•––
  • 50. var origin = “L‟Aquila, Italy";var destination = “London, England";var service = new google.maps.DistanceMatrixService();service.getDistanceMatrix({origins: [origin],destinations: [destination],travelMode: google.maps.TravelMode.DRIVING,avoidHighways: false,avoidTolls: false}, callback);function callback(response, status) {if (status == google.maps.DistanceMatrixStatus.OK) {var t = response.rows[0].elements[0].distance.text;alert(t);}}
  • 51.  42.362319,13.368514
  • 52. var geocoder = google.maps.Geocoder();geocoder.geocode(options, callback);•– – ––••–
  • 53. GeocoderResults
  • 54. geocoder = new google.maps.Geocoder();var address = “via Vetoio 1, L‟Aquila”;geocoder.geocode( { address: address}, callback);function callback(results, status) {if (status == google.maps.GeocoderStatus.OK) {for(result in results) {console.log(result.geometry.location);}} else {console.log(status);}}
  • 55. •––•–•–••–

×