geolocation and mapping in phonegap applications
Post on 07-May-2015
10.183 Views
Preview:
DESCRIPTION
TRANSCRIPT
•
•
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);
}
}
•
–
–
•
–
•
–
•
•
–
top related