Your SlideShare is downloading. ×
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,083
views

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,083
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
210
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. •––•–•–••–

×