Geolocation and Mapping in PhoneGap applications

  • 9,213 views
Uploaded 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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,213
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
191
Comments
0
Likes
5

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