cours 6 : have fun dominique rossin. ou suis-je ? idée : on affiche un div on crée une carte...
TRANSCRIPT
![Page 1: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/1.jpg)
Cours 6 : Have funCours 6 : Have funDominique RossinDominique Rossin
![Page 2: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/2.jpg)
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
![Page 3: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/3.jpg)
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/
![Page 4: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/4.jpg)
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 }} }});}});
![Page 5: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/5.jpg)
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.
![Page 6: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/6.jpg)
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
![Page 7: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/7.jpg)
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"}} }} ]] }} });});
![Page 8: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/8.jpg)
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
![Page 9: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/9.jpg)
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
![Page 10: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/10.jpg)
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"););
![Page 11: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/11.jpg)
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
![Page 12: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/12.jpg)
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();();
![Page 13: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/13.jpg)
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
……
![Page 14: Cours 6 : Have fun Dominique Rossin. Ou suis-je ? Idée : On affiche un div On crée une carte centrée sur une latitude et une longitude. On définit un](https://reader037.vdocuments.pub/reader037/viewer/2022103015/551d9da1497959293b8d0189/html5/thumbnails/14.jpg)
PictionaryPictionary
Idée. On dessine avec le doigt.Idée. On dessine avec le doigt.
Comment ?Comment ?