geolocation and mapping in phonegap applications
DESCRIPTION
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.comTRANSCRIPT
•
•
navigator.geolocation
•
•
•
•
•
geolocation
•
•
•
getCurrentPosition(win, [fail], [options]);
var id = watchPosition(win, [fail], [options]);
clearWatch(watchID);
•
–
•
–
•
–
•
–
getCurrentPosition watchPosition
Coordinates
Position
•
–
•
–
•
–
•
–
•
–
•
–
•
–
PositionError.PERMISSION_DENIED
PositionError.POSITION_UNAVAILABLE
PositionError.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 file
var options = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.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 = new
google.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.BOUNCE
setAnimation()
•
–
•
–
–
–
Polyline LatLngs
Marker 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
DirectionsService
DirectionsRequest
DirectionsService.route()
manageRoute
var 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);
}
}
•
–
–
•
–
•
–
•
•
–