• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Geolocation and Mapping in PhoneGap applications
 

Geolocation and Mapping in PhoneGap applications

on

  • 7,949 views

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

Statistics

Views

Total Views
7,949
Views on SlideShare
7,509
Embed Views
440

Actions

Likes
5
Downloads
174
Comments
0

2 Embeds 440

http://www.ivanomalavolta.com 437
http://vignesh.tk 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Geolocation and Mapping in PhoneGap applications Geolocation and Mapping in PhoneGap applications Presentation Transcript

  • ••
  • 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, 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);}
  • 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), intersect(bounds), getCenter(),union(bounds), etc.
  • 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.ROADMAP};var map = newgoogle.maps.Map(document.getElementById(“map”),options);// somewhere in your HTML templates<div id=“map”></div>
  • •–– 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) {var marker = new google.maps.Marker({position: event.latLng,map: map});map.setCenter(marker.getPosition());});
  • ••••
  • •––•––
  • •––•–––
  • •––•–
  • 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 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);
  • •••
  • google.maps.DirectionsService
  • DirectionsServiceDirectionsRequestDirectionsService.route()manageRoutevar dirService = new google.maps.DirectionsService();var request = {origin: ”…”,destination: “…”,travelMode: google.maps.TravelMode.DRIVING};dirService.route(request, manageRoute);
  • – 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();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);}}
  •  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}, callback);function callback(results, status) {if (status == google.maps.GeocoderStatus.OK) {for(result in results) {console.log(result.geometry.location);}} else {console.log(status);}}
  • •––•–•–••–