Upload
michelle-girard
View
105
Download
1
Embed Size (px)
Citation preview
Cours 6 : Have funCours 6 : Have funDominique RossinDominique Rossin
Ou suis-je ?Ou suis-je ?
Idée : Idée :
On affiche un divOn affiche un div
On crée une carte centrée sur une latitude On crée une carte centrée sur une latitude et une longitude.et une longitude.
On définit un facteur de zoomOn définit un facteur de zoom
On afficheOn affiche
En pratiqueEn pratique
<div <div idid=="map""map" stylestyle=="width:300px; height:450px""width:300px; height:450px">>
On crée un On crée un divdiv
On affiche une carte dans On affiche une carte dans ce divce div
$(document).ready($(document).ready(functionfunction() {() { $($("#map""#map").gmap3();).gmap3();});});
Ne pas oublier d’inclure les Ne pas oublier d’inclure les librairieslibrairies
<script <script typetype=="text/javascript""text/javascript" srcsrc==""http://maps.google.com/maps/api/js?sensor=false&language=enhttp://maps.google.com/maps/api/js?sensor=false&language=en""></script>></script> <script <script typetype=="text/javascript""text/javascript" srcsrc=="cordova.js""cordova.js"></script>></script> <script <script typetype=="text/javascript""text/javascript" srcsrc=="js/jquery.js""js/jquery.js"></script>></script> <script <script typetype=="text/javascript""text/javascript" srcsrc=="js/gmap3.js""js/gmap3.js"></script>></script> Surlibrairie de Surlibrairie de
google mapgoogle maphttp://http://gmap3.net/en/gmap3.net/en/
Centrage sur la France (45,0)Centrage sur la France (45,0)
$($("#map""#map").gmap3({).gmap3({ map:{map:{ options:{options:{ center: [center: [4545, , 00],], zoom: zoom: 1212 }} }});}});
Ou suis-je ?Ou suis-je ?
Idée:Idée:
Utiliser le GPS pour se géolocaliserUtiliser le GPS pour se géolocaliser
Utiliser la latitude et la longitude donnée Utiliser la latitude et la longitude donnée par celui-ci pour afficher la carte centrée.par celui-ci pour afficher la carte centrée.
Ou suis-je (code javascript) ? Ou suis-je (code javascript) ?
navigator.geolocation.getCurrentPosition(onSuccess, onError,navigator.geolocation.getCurrentPosition(onSuccess, onError,{maximumAge: {maximumAge: 1000010000, timeout: , timeout: 300000300000, enableHighAccuracy: , enableHighAccuracy: truetrue}}););
En cas de En cas de succès de succès de
géolocalisationgéolocalisation
En cas d’échec En cas d’échec de de
géolocalisationgéolocalisation
functionfunction onSuccess(position) { onSuccess(position) { varvar latitude = position.coords.latitude; latitude = position.coords.latitude; varvar longitude = position.coords.longitude; longitude = position.coords.longitude; $($("#map""#map").gmap3({).gmap3({ map:{map:{ options:{options:{ center: [latitude, longitude],center: [latitude, longitude], zoom: zoom: 1212 }} }});}}); };};
Afficher la Afficher la cartecarte
On récupère les On récupère les coordonnéescoordonnées
Position du centrePosition du centre
Cartes : Las, je suis là …Cartes : Las, je suis là …
Afficher des marqueurs sur la carteAfficher des marqueurs sur la carte $($('#map''#map').gmap3({).gmap3({ marker:{marker:{ values:[values:[ {{ latLng:[latitude,longitude],latLng:[latitude,longitude], data: data: "Centre de la carte""Centre de la carte" },}, {{ latLng:[latitudelatLng:[latitude+.02+.02,longitude,longitude+.01+.01],], data: data: "Un peu décalé""Un peu décalé",, options:{icon: options:{icon: "http://maps.google.com/mapfiles/marker_green.png""http://maps.google.com/mapfiles/marker_green.png"}} }} ]] }} });});
Action si clicAction si clic $($('#map''#map').gmap3({).gmap3({ marker:{marker:{ values:[{values:[{ latLng:[latitude,longitude],latLng:[latitude,longitude], data: data: "Centre de la carte""Centre de la carte" }, …}, … ],], events: {events: { click: click: functionfunction(marker, event, context){(marker, event, context){ varvar map = $( map = $(thisthis).gmap3().gmap3("get""get"),), infowindow = $(infowindow = $(thisthis).gmap3({get:{name:).gmap3({get:{name:"infowindow""infowindow"}});}}); ifif (infowindow){ (infowindow){ infowindow.open(map, marker);infowindow.open(map, marker); infowindow.setContent(context.data);infowindow.setContent(context.data); } } elseelse { { $($(thisthis).gmap3({).gmap3({ infowindow:{infowindow:{ anchor:marker,anchor:marker, options:{content: context.data}options:{content: context.data} }} });}); }} }} }} }} });});
Création d’une fenêtreCréation d’une fenêtre
Affichage du dataAffichage du data
Du dessinDu dessin
On a une feuille de dessinOn a une feuille de dessin
On utilise des primitivesOn utilise des primitives
Attention cela est beaucoup trop lent pour faire des Attention cela est beaucoup trop lent pour faire des animationsanimations
Feuille de dessinFeuille de dessin
<canvas <canvas idid=="dessin""dessin" stylestyle=="width:200px; height: 200px; border: solid "width:200px; height: 200px; border: solid 1px red; background-color:white"1px red; background-color:white"></canvas>></canvas>
On récupère en javascript le contexte On récupère en javascript le contexte de dessinde dessin
varvar canvas = $( canvas = $("#dessin""#dessin")[)[00];]; varvar context = canvas.getContext( context = canvas.getContext("2d""2d"););
On fait des dessinsOn fait des dessinsvarvar canvas = $( canvas = $("#dessin""#dessin")[)[00];];varvar context = canvas.getContext( context = canvas.getContext("2d""2d"););
context.fillRect(context.fillRect(5050, , 2525, , 150150, , 100100););
contextcontext..fillRectfillRect((2525,,2525,,100100,,100100););contextcontext..clearRectclearRect((4545,,4545,,6060,,6060););contextcontext..strokeRectstrokeRect((5050,,5050,,5050,,5050););
Dessin d’un Dessin d’un rectanglerectangle
Dessin Dessin autresautres
Dessin d’un triangle ou d’une Dessin d’un triangle ou d’une forme géométriqueforme géométrique
contextcontext..beginPathbeginPath();();contextcontext..moveTomoveTo((7575,,5050););contextcontext..lineTolineTo((100100,,7575););contextcontext..lineTolineTo((100100,,2525););contextcontext..fillfill();();
Mais aussiMais aussi
Déplacement : moveToDéplacement : moveTo
Arc : arc(x,y, radius,startAngle,endAngle, antihoraire )Arc : arc(x,y, radius,startAngle,endAngle, antihoraire )
BézierBézier
……
PictionaryPictionary
Idée. On dessine avec le doigt.Idée. On dessine avec le doigt.
Comment ?Comment ?