Navigation à la google map
Fermé
leto23
Messages postés
86
Date d'inscription
samedi 17 novembre 2007
Statut
Membre
Dernière intervention
24 janvier 2010
-
23 janv. 2010 à 00:03
lilou - 17 mai 2011 à 15:39
lilou - 17 mai 2011 à 15:39
A voir également:
- Navigation à la google map
- Google maps satellite - Guide
- Dns google - Guide
- Navigation privée - Guide
- Google earth - Télécharger - 3D
- Coordonnées gps google maps - Guide
9 réponses
jona303
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
23 janv. 2010 à 00:51
23 janv. 2010 à 00:51
Mhhh, joli défi,.. :)
comme ça je me dirais que je diviserais la partie visible en 4 div,.. topLeft,.. topRight ,....
avec autour de la "partie visible" des div de la même dimension que les div topLeft, topRight,..
quand on déplace, on déplace l'ensemble de ces div, et quand il ne reste plus de div d'un coté, c'est qu'il y en a de trop de l'autre coté,.. on le déplace la ou il n'y en a plus, et on adapte le background,...
Je sais pas si c'est clair, il est tard,.. mais ca me semble jouable.. :)
comme ça je me dirais que je diviserais la partie visible en 4 div,.. topLeft,.. topRight ,....
avec autour de la "partie visible" des div de la même dimension que les div topLeft, topRight,..
quand on déplace, on déplace l'ensemble de ces div, et quand il ne reste plus de div d'un coté, c'est qu'il y en a de trop de l'autre coté,.. on le déplace la ou il n'y en a plus, et on adapte le background,...
Je sais pas si c'est clair, il est tard,.. mais ca me semble jouable.. :)
leto23
Messages postés
86
Date d'inscription
samedi 17 novembre 2007
Statut
Membre
Dernière intervention
24 janvier 2010
6
23 janv. 2010 à 12:47
23 janv. 2010 à 12:47
Merci de ta réponse
J'ai aussi pensé aussi a mettre des DIV, après avoir posté mon sujet ^^
Selon ta technique, il me faudrait 4 DIV "visibles", et 12 DIV cachés pour prendre en compte tout les déplacements possibles.
Sa fait en tout 16 DIV...sa fait quand même beaucoup...
Ne pourrais t'on pas faire le même principe mais avec seulement 9 DIV ?
J'ai fait un exemple sur paint rapidement :
http://cluster1.easy-hebergement.net/
En gros, il y a un DIV centrale et 8 DIV en périphérie, il suffit alors de regarder quel est le div central et de charger dans tous les autres, les backgrounds correspondants...
Autre problème, j'ai mon "DIV conteneur" qui contient les autres "DIV image", sauf que si je fait un cliquer déplacer, alors la souris s'empare de l'image du "DIV ou des DIV image" qui se trouve dans le conteneur ! Les images étant déclarées en tant que background, il devrait être impossible pour la souris de s'en emparer...c'est tout de même bizarre, car une fois emparée, si je la place dans l'url de Firefox ou pour créer un nouvel onglet, il ne se passe rien...je ne comprend vraiment pas.
Exemple:
J'ai aussi pensé aussi a mettre des DIV, après avoir posté mon sujet ^^
Selon ta technique, il me faudrait 4 DIV "visibles", et 12 DIV cachés pour prendre en compte tout les déplacements possibles.
Sa fait en tout 16 DIV...sa fait quand même beaucoup...
Ne pourrais t'on pas faire le même principe mais avec seulement 9 DIV ?
J'ai fait un exemple sur paint rapidement :
http://cluster1.easy-hebergement.net/
En gros, il y a un DIV centrale et 8 DIV en périphérie, il suffit alors de regarder quel est le div central et de charger dans tous les autres, les backgrounds correspondants...
Autre problème, j'ai mon "DIV conteneur" qui contient les autres "DIV image", sauf que si je fait un cliquer déplacer, alors la souris s'empare de l'image du "DIV ou des DIV image" qui se trouve dans le conteneur ! Les images étant déclarées en tant que background, il devrait être impossible pour la souris de s'en emparer...c'est tout de même bizarre, car une fois emparée, si je la place dans l'url de Firefox ou pour créer un nouvel onglet, il ne se passe rien...je ne comprend vraiment pas.
Exemple:
<div id="divTest" name="divTest" onMouseDown="click('divTest');" onMouseover="move('divTest');" onMouseout="depose('divTest');" onMouseUp="depose('divTest');"
style="position:absolute;z-index:10;border:solid green 2px;overflow:hidden;">
<div id="div1" name="div1" style="position:absolute;height:300px;width:300px;left:0px;top:0px;background:url('img_1.png');"></div>
<div id="div2" name="div2" style="position:absolute;height:300px;width:300px;left:300px;top:0px;background:url('img_2.png');"></div>
<div id="div3" name="div3" style="position:absolute;height:300px;width:300px;left:0px;top:300px;background:url('img_3.png');"></div>
<div id="div4" name="div4" style="position:absolute;height:300px;width:300px;left:300px;top:300px;background:url('img_4.png');"></div>
</div>
jona303
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
23 janv. 2010 à 15:45
23 janv. 2010 à 15:45
pour le nombre de div c'est un peu à toi de voir,..
Pour les clicks, ne fais pas ça dans le HTML,..
en jquery ça me parait tt à fait faisable (et le plugin UI pour jquery),...
genre tu donnes une classe commune a toutes tes miniDiv
et puis tu fais un truc du style
$('document').ready(function(){
$('#container').click(function(){
$('.miniDiv).startDrag();
}).mouseUp(funciton(){
$('.miniDiv).stopDrag();
});
});
Pour les clicks, ne fais pas ça dans le HTML,..
en jquery ça me parait tt à fait faisable (et le plugin UI pour jquery),...
genre tu donnes une classe commune a toutes tes miniDiv
et puis tu fais un truc du style
$('document').ready(function(){
$('#container').click(function(){
$('.miniDiv).startDrag();
}).mouseUp(funciton(){
$('.miniDiv).stopDrag();
});
});
leto23
Messages postés
86
Date d'inscription
samedi 17 novembre 2007
Statut
Membre
Dernière intervention
24 janvier 2010
6
23 janv. 2010 à 21:05
23 janv. 2010 à 21:05
Quand tu parles des clicks, tu veux dire les onMouseDown, onMouseover,... ?
La j'arrive a me déplacer quand il n'y a que une seul et unique image, sans problème. Je n'ai jamais utilisé jquey (entendu parler seulement...) et je n'ai pas trouvé le plugin que tu cites...par contre il y a des plugin sur le drag and drop.
J'utiliserais jquery pour faire quoi ? (le système drag and drop simple ? le système de découpage de l'image dans le div ?...)
La j'arrive a me déplacer quand il n'y a que une seul et unique image, sans problème. Je n'ai jamais utilisé jquey (entendu parler seulement...) et je n'ai pas trouvé le plugin que tu cites...par contre il y a des plugin sur le drag and drop.
J'utiliserais jquery pour faire quoi ? (le système drag and drop simple ? le système de découpage de l'image dans le div ?...)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
jona303
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
24 janv. 2010 à 03:19
24 janv. 2010 à 03:19
jquery est un framework javascript..
En gros ca "simplifie"le js et c'est très puissant, pour l'utiliser, tu dois d'abord inclure le fichier jquery dans le html
https://jquery.com/
et pour le systeme dragAndDrop il faut un plugin jquery qui s'appelle UI
https://jqueryui.com/
et avec ces deux la tu devrais pouvoir faire ce que j'ai écrit,... m^mee si ça te parait compliqué,.. un fois que c'est assimillé, tu fais ce que tu veux,.. donc voila bon courage, si t'as des questions n'hésite pas.. ;)
En gros ca "simplifie"le js et c'est très puissant, pour l'utiliser, tu dois d'abord inclure le fichier jquery dans le html
https://jquery.com/
et pour le systeme dragAndDrop il faut un plugin jquery qui s'appelle UI
https://jqueryui.com/
et avec ces deux la tu devrais pouvoir faire ce que j'ai écrit,... m^mee si ça te parait compliqué,.. un fois que c'est assimillé, tu fais ce que tu veux,.. donc voila bon courage, si t'as des questions n'hésite pas.. ;)
leto23
Messages postés
86
Date d'inscription
samedi 17 novembre 2007
Statut
Membre
Dernière intervention
24 janvier 2010
6
24 janv. 2010 à 17:20
24 janv. 2010 à 17:20
J'ai réussit a recréer ma carte navigable avec jquery. Pour cela j'ai utilisé la méthode "draggable()" de jquery UI.
C'est effectivement plus simple à faire avec jquery quand on a comprit son fonctionnement ^^
Maintenant il va falloir que je découpe ma carte en partie...
Y aurais t'il avec jquery moyen de faire un zoom sur une image ? un slider qui ferais un zoom pourrais être pas mal ^^
C'est effectivement plus simple à faire avec jquery quand on a comprit son fonctionnement ^^
Maintenant il va falloir que je découpe ma carte en partie...
Y aurais t'il avec jquery moyen de faire un zoom sur une image ? un slider qui ferais un zoom pourrais être pas mal ^^
jona303
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
24 janv. 2010 à 17:29
24 janv. 2010 à 17:29
ici ;)
http://www.mind-projects.it/jqzoom_v10
http://www.mind-projects.it/jqzoom_v10
jona303
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
24 janv. 2010 à 17:46
24 janv. 2010 à 17:46
mais en y réfléchissant 2 min,...
Je pense que la meilleure manière de fonctionner pour le "ZOOM" c'est de créer l'image en PHP,..
Comme ça avec peu d'image en haute qualité (la définition qui correspond au plus grand zoom acceptable), tu peux faire une image légère pour la navigation "dézoomée", et tout aussi légère pour la navigation zoomée.. sans pertes de qualité.
ici il ya un petit tuto,...
https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/916429-creez-des-images-en-php
et si tu veux j'ai déjà deux trois classes php que je peux te filer qui créent des images (->MP)
voila bonne chance..
et bon courage, il reste un peu de taf.. :p
Je pense que la meilleure manière de fonctionner pour le "ZOOM" c'est de créer l'image en PHP,..
Comme ça avec peu d'image en haute qualité (la définition qui correspond au plus grand zoom acceptable), tu peux faire une image légère pour la navigation "dézoomée", et tout aussi légère pour la navigation zoomée.. sans pertes de qualité.
ici il ya un petit tuto,...
https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/916429-creez-des-images-en-php
et si tu veux j'ai déjà deux trois classes php que je peux te filer qui créent des images (->MP)
voila bonne chance..
et bon courage, il reste un peu de taf.. :p
leto23
Messages postés
86
Date d'inscription
samedi 17 novembre 2007
Statut
Membre
Dernière intervention
24 janvier 2010
6
24 janv. 2010 à 18:56
24 janv. 2010 à 18:56
Je verrais pour le zoom, une fois que j'aurais fini le découpage de l'image ^^
Pour voir se que j'ai déjà fait :
http://cluster1.easy-hebergement.net/
j'ai réduit la qualité de l'image au (presque) maximum pour qu'elle se charge le plus rapidement possible...elle fait 172 ko (au lieu de 5 Mo ^^)
On peut parcourir la carte en drag and drop, l'affichage reste limité à se qui est visible...(pas moyen de faire sortir la carte de la zone d'affichage par exemple). J'affiche en bas ("DIV1:") la position de l'origine de la carte, se qui me servira pour détecter les images à charger en ajax, mais sa sa reste à faire....
En tous cas merci jona303 pour ton aide !
Je connait déjà l'utilisation des images en php, et le tuto sur le site du zéro. J'ai chercher il y a pas longtemps sur comment faire un zoom...et apparemment, il n'existe aucune méthodes en css pour le faire...les deux seules solutions que je connaisse sont:
-faire des traitements sur l'image en PHP, mais sa doit demander pas mal de ressource...
-avoir déjà sur le serveur, les images en différentes tailles, sa implique de recharger à chaque fois, des images différentes juste pour afficher plus gros/moins gros...
Sur ces deux méthodes, je ne sait qu'elle est la plus rapide...et la plus efficace...
Sait tu quelle est la technique appliquée sur jqzoom, et si cela demande beaucoup de ressources ?
Pour voir se que j'ai déjà fait :
http://cluster1.easy-hebergement.net/
j'ai réduit la qualité de l'image au (presque) maximum pour qu'elle se charge le plus rapidement possible...elle fait 172 ko (au lieu de 5 Mo ^^)
On peut parcourir la carte en drag and drop, l'affichage reste limité à se qui est visible...(pas moyen de faire sortir la carte de la zone d'affichage par exemple). J'affiche en bas ("DIV1:") la position de l'origine de la carte, se qui me servira pour détecter les images à charger en ajax, mais sa sa reste à faire....
En tous cas merci jona303 pour ton aide !
Je connait déjà l'utilisation des images en php, et le tuto sur le site du zéro. J'ai chercher il y a pas longtemps sur comment faire un zoom...et apparemment, il n'existe aucune méthodes en css pour le faire...les deux seules solutions que je connaisse sont:
-faire des traitements sur l'image en PHP, mais sa doit demander pas mal de ressource...
-avoir déjà sur le serveur, les images en différentes tailles, sa implique de recharger à chaque fois, des images différentes juste pour afficher plus gros/moins gros...
Sur ces deux méthodes, je ne sait qu'elle est la plus rapide...et la plus efficace...
Sait tu quelle est la technique appliquée sur jqzoom, et si cela demande beaucoup de ressources ?
