Geolocation and Mapping in PhoneGap applications

12,876 views
12,478 views

Published on

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

Geolocation and Mapping in PhoneGap applications

  1. 1. ••
  2. 2. navigator.geolocation•••
  3. 3. ••
  4. 4. geolocation•••
  5. 5. getCurrentPosition(win, [fail], [options]);
  6. 6. var id = watchPosition(win, [fail], [options]);
  7. 7. clearWatch(watchID);
  8. 8. •–•–•–•–
  9. 9. getCurrentPosition watchPosition
  10. 10. CoordinatesPosition
  11. 11. •–•–•–
  12. 12. •–•–
  13. 13. •–•–
  14. 14. PositionError.PERMISSION_DENIEDPositionError.POSITION_UNAVAILABLEPositionError.TIMEOUT
  15. 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. 16. google.maps.Map
  17. 17. google.maps.Map(htmlElement, options);•–• <div id=“map”></div>•–
  18. 18. •–•–•––
  19. 19. •–•–•–•–•
  20. 20. ••new google.maps.LatLng(42.3606,13.3772);
  21. 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. 22. mapTypeId: google.maps.MapTypeId.ROADMAP• ROADMAP• SATELLITE• HYBRID• TERRAIN
  23. 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. 24. •–– touchend•––
  25. 25. addListener()google.maps.event.addListener(obj, eventname, callback)•–•––•
  26. 26. addDOMListener(obj, eventname, callback)addListener, obj
  27. 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. 28. ••••
  29. 29. •––•––
  30. 30. •––•–––
  31. 31. •––•–
  32. 32. marker = new google.maps.Marker({// options});google.maps.event.addListener(marker, click,callback);
  33. 33. google.maps.Marker•– LatLng•– Map– setMap()– setMap() null
  34. 34. •– google.maps.Animation.DROP– google.maps.Animation.BOUNCEsetAnimation()•–•–––
  35. 35. Polyline LatLngsMarker Polyline
  36. 36. •– LatLng•–•–•–•–
  37. 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. 38. •••
  39. 39. google.maps.DirectionsService
  40. 40. DirectionsServiceDirectionsRequestDirectionsService.route()manageRoutevar dirService = new google.maps.DirectionsService();var request = {origin: ”…”,destination: “…”,travelMode: google.maps.TravelMode.DRIVING};dirService.route(request, manageRoute);
  41. 41. – DirectionsRoute–
  42. 42. • DirectionsLeg•• LatLngs• LatLngBounds••
  43. 43. • DirectionsStep••• LatLng•LatLng••
  44. 44. •••• LatLng•LatLng
  45. 45.
  46. 46. google.maps.DistanceMatrixService.getDistanceMatrix(options, callback)•–•–
  47. 47. •–•–•–––•––••
  48. 48. • DistanceMatrixResponse• DistanceMatrixStatus
  49. 49. •–•–•–•––
  50. 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. 51.  42.362319,13.368514
  52. 52. var geocoder = google.maps.Geocoder();geocoder.geocode(options, callback);•– – ––••–
  53. 53. GeocoderResults
  54. 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. 55. •––•–•–••–

×