Cadrer parcours carte

Version imprimable

Bonjour,

J'utilise l'api google map sur une des pages de mon site.
L'api affiche plusieurs cartes du monde en même temps et une large bordure grise en haut et en bas lorsque l'on dézoom au maximum.

Ma question est la suivante : Comment faire pour que l'utilisateur ne puisse parcourir qu'une seule carte et sans déborder sur cette bordure grise.

Voici l'instanciation de ma carte :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function initialisation(){ document.getElementById("divPays").innerHTML="(Cliquer sur un point de la carte.)"; var centreCarte = new google.maps.LatLng(47.389982, 0.688877); var optionsCarte = { zoom: 2, center: centreCarte, scrollwheel: true, keyboardShortcuts: false, panControl: false, mapTypeControl: false, overviewMapControl: false, rotateControl: false, scaleControl: false, streetViewControl: false, zoomControl: false, draggable : true, mapTypeId: google.maps.MapTypeId.ROADMAP } var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
Je pense qu'il faut ajouter un Listener sur google.map de je n'ai aucune idée des propriétés à lui passer en paramètre pour qu'il recentre la carte dès que l'utilisateur "sort" d'une zone spécifiée (dans mon cas cette zone serait une des cartes affichées)

Bonsoir,
il te faudra malheureusement faire avec car la route risque d'être semée d’embûche.

En premier il convient de fixer une taille au conteneur compatible avec ce que tu veux réaliser.

<div id="div_carte" style="height:512px;height:512px;"></div> te permet d'afficher 4 tilles, les fameux carreaux, chacun d'eux faisant 256x256 px.

Mais à quoi cela sert, à rien si ce n'est qu'avec un zoom=1 en centrant sur (0,0) il n'y aura pas de liseré gris.

Un exemple de ce qui peut être fait en verrouyant le ZOOM_MINI
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html> <html lang="fr"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[GoogleMaps API V3] Insertion d'une Carte</title> <style type="text/css"> #div_carte { height : 512px; /* IMPERATIF */ width : 512px; margin : auto; border : 1px solid #888; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initCarte(){ // création de la carte var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{ 'center' : new google.maps.LatLng( 0, 0), 'zoom' : 1, 'minZoom' : 1, // limite du zoom mini 'mapTypeId' : google.maps.MapTypeId.ROADMAP }); google.maps.event.addListener( oMap, 'zoom_changed', function(){ if( this.getZoom() == 1){ this.setCenter(new google.maps.LatLng( 0, 0)); } }); } // init lorsque la page est chargée google.maps.event.addDomListener( window, 'load', initCarte); </script> </head> <body> <h1>Titre de la carte</h1> <div id="div_carte"></div> </body> </html>
Bon pour le reste tu peux jouer avec les événements de la carte comme zoom_changed, bounds_changed pour rectifier le tir lorsque le déplacement de la carte est terminé.

Bonjour NoSmoking,

merci pour ta réponse.

Je me suis pas mal documenté sur bounds_changed mais je suis un peu perdu et je n'avance pas :oops:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
var coinInfGauche = LatLng(-90,-180);
var coinSupDroit = LatLng(90, 180);
var boundLimite = new google.maps.LatLngBounds(coinInfGauche, coinSupDroit);
				google.maps.event.addListener(maCarte,"bounds_changed",function() {
					var boundCourant = getBounds();
					if (boundCourant.getSouthWest()>boundLimite.getSouthWest() || boundCourant.getNorthEast()>boundLimite.getNorthEast()){
						maCarte.setCenter(new google.maps.LatLng( 0, 0));
 
					}
				}

J'essaye des chose comme ça mais sans grand succès...

dans l'exemple que je t'ai mis plus haut l'intérêt est de voir qu'elles sont les limites d'une carte.

Je tiens à préciser que verrouiller dans la largeur, suivant la longitude, ne me paraît pas important, seule l'analyse des latitudes est intéressante.

Dans un premier temps on peut se rendre compte que l'affichage d'une carte complète se limite à

latitude Nord : 85.1114157806266
latitude SUD : -85.1114157806266

A partir de la il suffit de récupérer la latitude NORD et de la comparer avec la latitude NORD MAXI et la même chose pour la latitude SUD.

Donc on pose :
Code:

1 2 var LAT_MAXI = 85.1114157806266, LAT_MINI = -85.1114157806266;
pour le test il suffit de faire, après récupération des valeurs de la carte en cours, le test avec ces valeurs.

Mais que faire si le cadre est dépassé, dans ce cas on recentre sur le centre précédent que l'on aura sauvegardé.

Au final on pourrait obtenir une fonction sur l'événement 'bounds_changed' du type de
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 google.maps.event.addListener( oMap, 'bounds_changed', function(){ // récup. les latitudes var bounds = this.getBounds(); var latNE = bounds.getNorthEast().lat(); var latSW = bounds.getSouthWest().lat(); // bandeau haut/bas visible if( (latNE > LAT_MINI)||(latSW < LAT_MAXI)){ // on replace au centre précédent this.setCenter( this.oldCentre); } else{ // on sauvegarde le nouveau centre this.oldCentre = this.getCenter(); } });
Je pense qu'il faut quand même se méfier des appels redondant des fonctions, changer la position du centre => changement des bounds ...etc..

La fonction n'est pas optimum attendu que l'on pourra très bien être vérouiller avant les latitudes MAXI/MINI, mais comme il n'y a pas grand chose à voir aux pôles :mrgreen:

:D merci beaucoup je comprends mieux comment s'utilise l'objet bounds.

J'ai tenté d'adapter ton code pour faire pareil avec les longitudes mais avec les différentes cartes côte à côte sa coince dès qu'il y a deux carte affichées.

Il y a t'il un moyen pour contourner cela ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var LAT_MAXI =  85.1114157806266, LAT_MINI =  -85.1114157806266;
var LNG_MAXI = 176, LNG_MINI = -176;
google.maps.event.addListener( maCarte, 'bounds_changed', function(){
   // récup. les latitudes
   var bounds = this.getBounds();
   var latNE = bounds.getNorthEast().lat();
   var latSW = bounds.getSouthWest().lat();
   var lngNE = bounds.getNorthEast().lng();
   var lngSW = bounds.getSouthWest().lng();
   // bandeau haut/bas visible
   if( (latNE > LAT_MAXI)||(latSW < LAT_MINI)){//il y avait juste les conditons qui étaient inversées
       // on replace au centre précédent
      this.setCenter( this.oldCentre);				
   }
   else if ((lngNE > LNG_MAXI) || (lngSW < LNG_MINI)){//non fonctionnel
      this.setCenter( this.oldCentre);				
   }
   else{
      // on sauvegarde le nouveau centre
       this.oldCentre = this.getCenter();
   }
});

26/01/2013, 18h14
NoSmoking

Citation:

Envoyé par NoSmoking

il te faudra malheureusement faire avec car la route risque d'être semée d’embûche.

je t'avais prévenu :aie:

Plus sérieusement, tu oublies une choses c'est qu'au niveau de la ligne de changement de date, à droite la longitude est de -180° et à gauche de celle ci elle est à 180°, donc le test n'a plus de sens, il peut donc y avoir une longitude SW supérieure ou inférieure à une longitude NE.

Il te faudra avoir une autre approche ou alors retenir le sens de déplacement de la carte.

Une approche pourrait être de vérifier cela en coordonnées WORLD, je t'invites à lire la documentation à ce sujet :fleche: https://developers.google.com/maps/d...xelCoordinates

Pourquoi ne pas laisser aux gens le droit de faire le tour de la terre :cry:
28/01/2013, 17h52
Markast

Au final c'est pas si dérangeant que ça d'avoir plusieurs cartes du monde pour l'utilisateur vu que tous les marqueurs sont reportés sur chaque carte, le principal était pour moi de masqué le cadre gris et je te remercie beaucoup pour le cela.

J'ai passé plusieurs heures à bidouiller des condition if, avec un zoom min de 4, en comparant des postions avec 'dragstart' et 'dragend' mais sans résultats probants :mrgreen:

Au final j'ai simplement ajouté des conditions dans le if de la fonction 'bounds_changed' comme par exemple pour la limite Est:

Code:

((lngNE > 175) || (lngNE >-180 ) && (lngNE < -100))

Cela fonctionne pas trop mal mais il faut un zoom minimum (ex : 4) et fixe !
(pas trop pertinent :aie:)

Je ne connaissait pas ces coordonnées world, merci pour le lien. Je regarderais ça quand j'en serais à l'optimisation du site.

Encore merci pour tout ;)
Bonne continuation :D !