Geolocation and Mapping in PhoneGap applications

11,739
-1

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. •––•–•–••–

×