0
••
navigator.geolocation•••
••
geolocation•••
getCurrentPosition(win, [fail], [options]);
var id = watchPosition(win, [fail], [options]);
clearWatch(watchID);
•–•–•–•–
getCurrentPosition watchPosition
CoordinatesPosition
•–•–•–
•–•–
•–•–
PositionError.PERMISSION_DENIEDPositionError.POSITION_UNAVAILABLEPositionError.TIMEOUT
var options = { maximumAge: 3000, timeout: 5000,enableHighAccuracy: true };navigator.geolocation.watchPosition(win, fail, ...
google.maps.Map
google.maps.Map(htmlElement, options);•–• <div id=“map”></div>•–
•–•–•––
•–•–•–•–•
••new google.maps.LatLng(42.3606,13.3772);
••var pt = new google.maps.LatLngBounds(new google.maps.LatLng(57.8, 14.0),new google.maps.LatLng(57.8, 14.0));contains(pt...
mapTypeId: google.maps.MapTypeId.ROADMAP• ROADMAP• SATELLITE• HYBRID• TERRAIN
// in your JS filevar options = {center: new google.maps.LatLng(-34.397, 150.644),zoom: 8,mapTypeId: google.maps.MapTypeId...
•–– touchend•––
addListener()google.maps.event.addListener(obj, eventname, callback)•–•––•
addDOMListener(obj, eventname, callback)addListener, obj
var map = newgoogle.maps.Map(document.getElementById(“map”),opt);google.maps.event.addListener(map, click,function(event) ...
••••
•––•––
•––•–––
•––•–
marker = new google.maps.Marker({// options});google.maps.event.addListener(marker, click,callback);
google.maps.Marker•– LatLng•– Map– setMap()– setMap() null
•– google.maps.Animation.DROP– google.maps.Animation.BOUNCEsetAnimation()•–•–––
Polyline LatLngsMarker Polyline
•– LatLng•–•–•–•–
var map; // the map object (initialization omitted here)var coords = [new google.maps.LatLng(37.772323, -122.214897),new g...
•••
google.maps.DirectionsService
DirectionsServiceDirectionsRequestDirectionsService.route()manageRoutevar dirService = new google.maps.DirectionsService()...
– DirectionsRoute–
• DirectionsLeg•• LatLngs• LatLngBounds••
• DirectionsStep••• LatLng•LatLng••
•••• LatLng•LatLng

google.maps.DistanceMatrixService.getDistanceMatrix(options, callback)•–•–
•–•–•–––•––••
• DistanceMatrixResponse• DistanceMatrixStatus
•–•–•–•––
var origin = “L‟Aquila, Italy";var destination = “London, England";var service = new google.maps.DistanceMatrixService();s...
 42.362319,13.368514
var geocoder = google.maps.Geocoder();geocoder.geocode(options, callback);•– – ––••–
GeocoderResults
geocoder = new google.maps.Geocoder();var address = “via Vetoio 1, L‟Aquila”;geocoder.geocode( { address: address}, callba...
•––•–•–••–
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
×

Geolocation and Mapping in PhoneGap applications

10,748

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

Transcript of "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. •––•–•–••–
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×